Front-end vue+express file upload and download example

 yarn init -y
yarn add express nodemon -D
var express = require("express");
const fs = require("fs");
var path = require("path");
const multer = require("multer"); //Specify the path var app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
// Front-end solves cross-domain issues app.all("*", (req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  next();
});
// Access static resources app.use(express.static(path.join(__dirname)));

// File upload app.post("/upload", multer({ dest: "./public" }).any(), (req, res) => {
  const { fieldname, originalname } = req.files[0];
  // Create a new path 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: "Upload failed", data: [] });
    } else {
      res.send({ code: 1, msg: "Upload successful", data: newName });
    }
  });
});
// File download app.get('/download', function(req, res) {
  res.download('./public/test.xls');
});

// Image download app.get('/download/img', function(req, res) {
  res.download('./public/2.jpg');
});

let port = 9527;
app.listen(port, () => console.log(`Port started: http://localhost:${port}`));

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

 <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)
      })
    }, 

 <input type="button" value="Click to download" @click="handleDownload">
      handleDownload() {  
    axios({  
      method: 'get',  
      url: "http://localhost:9527/download",  
      data: {    
        test: "test data"  
      },  
      responseType: "arraybuffer" // arraybuffer is an interface for processing binary in js}).then(response => {          
      // Create a Blob instance with the returned binary data if(!response) return;
      let blob = new Blob([response.data], {            
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", 
      }) // for .xlsx files          
      // Generate file path through URL.createObjectURL let url = window.URL.createObjectURL(blob) 
      console.log("url==========",url)        
      // Create a tag let ele = document.createElement("a")          
      ele.style.display = 'none'          
      // Set the href attribute to the file path, and the download attribute to the file name ele.href = url          
      ele.download = this.name          
      // Add the a tag to the page and simulate a click document.querySelectorAll("body")[0].appendChild(ele)          
      ele.click()          
      // Remove the a tag ele.remove()        
    });
  }, 

 // Download binary stream image file 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 // Image display var a = document.createElement('a')
        a.href = src
        a.download = '2.jpg'
        a.click()
        a.remove()
      })
    }