前端vue+express实现文件的上传下载示例

我们来详细讲解一下“前端vue+express实现文件的上传下载示例”的完整攻略。

1. 准备工作

首先，我们需要安装node.js和npm，这两个东西是在建立一个web应用程序时必要的要素。安装好这两个以后，我们可以使用npm安装express和vue-cli。

# 安装express
npm install express --save

# 安装vue-cli
npm install -g vue-cli

2. 创建项目

接下来，我们可以使用vue-cli创建vue项目：

vue init webpack file-upload-download-demo

3. 在项目中添加依赖项

我们需要在项目中安装以下依赖项：

# 安装express
npm install express --save

# 安装express-fileupload
npm install express-fileupload --save

# 安装cors
npm install cors --save

4. 编写服务端代码

我们需要在项目中创建一个server文件夹，将服务端代码放在这里面。然后，在server文件夹中创建一个index.js文件，编写如下代码：

// 引入express和express-fileupload
const express = require('express');
const fileUpload = require('express-fileupload');
const cors = require('cors');

// 创建服务器
const app = express();

// 添加跨域支持
app.use(cors());

// 设置端口号
const port = 3000;

// 存储文件
app.use(fileUpload());

// 处理上传文件的请求
app.post('/upload', (req, res, next) => {
  let file = req.files.file;
  file.mv('./uploads/' + file.name, (err) => {
    if (err) {
      res.status(500).send(err);
    }
    else {
      res.status(200).send('文件上传成功');
    }
  });
});

// 处理下载文件的请求
app.get('/download/:fileName', (req, res) => {
  let fileName = req.params.fileName;
  res.download('./uploads/' + fileName, fileName, (err) => {
    if (err) {
      res.status(500).send(err);
    }
  });
});

// 启动服务
app.listen(port, () => {
  console.log(`服务已启动，监听端口 ${port}`);
});

5. 编写前端代码

在Vue项目中，我们需要编写两个组件：一个用来处理上传文件，一个用来处理下载文件。这里分别说明。

5.1 上传文件的组件

在src/components/文件夹下，我们创建一个UploadFile.vue文件，内容如下：

<template>
  <div>
    <input type="file" @change="uploadFile"/>
  </div>
</template>

<script>
export default {
  methods: {
    uploadFile(event) {
      let formData = new FormData();
      formData.append('file', event.target.files[0]);
      this.$http.post('http://localhost:3000/upload', formData).then(response => {
        console.log(response.data);
      });
    }
  }
}
</script>

5.2 下载文件的组件

同样，在src/components/文件夹下，我们创建一个DownloadFile.vue文件，内容如下：

<template>
  <div>
    <select @change="downloadFile">
      <option v-for="file in fileList" :value="file">{{file}}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
       fileList: [] 
    }
  },
  methods: {
    getFiles() {
      this.$http.get('http://localhost:3000/files').then(response => this.fileList = response.data);
    },
    downloadFile(event) {
      let fileName = event.target.value;
      this.$http.get('http://localhost:3000/download/' + fileName, {responseType: 'blob'}).then(response => {
        let url = window.URL.createObjectURL(new Blob([response.data]));
        let link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
      });
    }
  },
  mounted() {
    this.getFiles();
  }
}
</script>

6. 运行应用程序

我们需要在vue项目和server文件夹中分别运行以下命令：

# 在vue项目中运行
npm run dev

# 在server文件夹中运行
node index.js

到这里，我们就可以在浏览器中通过localhost:8080访问应用程序。在UploadFile.vue中选择一个文件上传，然后在DownloadFile.vue中选择一个文件下载即可完成完整的文件上传、下载示例。

以上是利用Vue和Express实现文件上传下载的示例，由于篇幅限制，只说明了代码的基本逻辑。如果您有其他问题可以查看相关的官方文档：Vue.js官方文档，Express官方文档以及express-fileupload的文档。