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

新建server.js

yarn init -y
yarn add express nodemon -D
var express = require("express");
const fs = require("fs");
var path = require("path");
const multer = require("multer"); //指定路径的

var app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
// 前端解决跨域问题
app.all("*", (req, res, next) => {
 res.header("Access-Control-Allow-Origin", "*");
 next();
});
// 访问静态资源
app.use(express.static(path.join(__dirname)));

// 文件上传
app.post("/upload", multer({ dest: "./public" }).any(), (req, res) => {
 const { fieldname, originalname } = req.files[0];
 // 创建一个新路径
 const name = fieldname.slice(0, fieldname.indexOf("."));
 const newName = "public/" + name + path.parse(originalname).ext;
 fs.rename(req.files[0].path, newName, function (err) {
   if (err) {
     res.send({ code: 0, msg: "上传失败", data: [] });
   } else {
     res.send({ code: 1, msg: "上传成功", data: newName });
   }
 });
});
// 文件下载
app.get('/download', function(req, res) {
 res.download('./public/test.xls');
});

// 图片下载
app.get('/download/img', function(req, res) {
 res.download('./public/2.jpg');
});

let port = 9527;
app.listen(port, () => console.log(`端口启动: http://localhost:${port}`));

(1):前端文件上传请求

第一种： form表单

<form action="http://localhost:9527/upload" method="POST" encType="multipart/form-data">
     <input type="file" name="user"/>
     <input type="submit" />
   </form>

第一种： input输入框

<input type="file"  @change="changeHandler($event)"/>
    changeHandler(event) {
     let files  = event.target.files[0];
     console.log("files",files)
     let data = new FormData();
     data.append(files.name,files);
     console.log("data",data)
     axios.post("http://localhost:9527/upload",data,{
       headers:{
         "Content-Type":"multipart/form-data"
       }
     }).then(res =>{
       console.log("res",res)
     })
   },

(2):前端文件下载

第一种： 后端返回一个下载的链接地址，前端直接使用 即可
第二种： 使用二进制流文件下载

<input type="button" value="点击下载" @click="handleDownload">
     handleDownload() {  
   axios({  
     method: 'get',  
     url: "http://localhost:9527/download",  
     data: {    
       test: "test data"  
     },  
     responseType: "arraybuffer" // arraybuffer是js中提供处理二进制的接口
   }).then(response => {          
     // 用返回二进制数据创建一个Blob实例
     if(!response) return;
     let blob = new Blob([response.data], {            
       type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
     }) // for .xlsx files          
     // 通过URL.createObjectURL生成文件路径          
     let url = window.URL.createObjectURL(blob)
     console.log("url==========",url)        
     // 创建a标签          
     let ele = document.createElement("a")          
     ele.style.display = 'none'          
     // 设置href属性为文件路径，download属性可以设置文件名称          
     ele.href = url          
     ele.download = this.name          
     // 将a标签添加到页面并模拟点击          
     document.querySelectorAll("body")[0].appendChild(ele)          
     ele.click()          
     // 移除a标签          
     ele.remove()        
   });
 },

(3) 附加：二进制流图片的下载

// 二进制流图片文件的下载
 downLoadImg() {
    axios({
       method: 'get',
       url: `http://localhost:9527/download/img`,
       responseType: 'arraybuffer',
       params: {
         id: 12
       }
     }).then(res => {
       var src = 'data:image/jpg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      // this.srcImg = src // 图片回显
       var a = document.createElement('a')
       a.href = src
       a.download = '2.jpg'
       a.click()
       a.remove()
     })
   }

来源：https://blog.csdn.net/lxs19930928/article/details/122192837