Beispiel für das Hoch- und Herunterladen von Dateien im Front-End mit Vue+Express

 Garn init -y
Garn hinzufügen Express Nodemon -D
var express = erfordern("express");
const fs = erfordern("fs");
var Pfad = erforderlich("Pfad");
const multer = require("multer"); //Pfad angeben var app = express();
app.use(express.json());
app.use(express.urlencoded({ erweitert: true }));
// Front-End löst domänenübergreifende Probleme app.all("*", (req, res, next) => {
  res.header("Zugriffskontrolle-Origin zulassen", "*");
  nächste();
});
// Auf statische Ressourcen zugreifen app.use(express.static(path.join(__dirname)));

// Datei hochladen app.post("/upload", multer({ dest: "./public" }).any(), (req, res) => {
  const { Feldname, Originalname } = req.files[0];
  // Neuen Pfad erstellen const name = fieldname.slice(0, fieldname.indexOf("."));
  const neuerName = "public/" + name + path.parse(originalname).ext;
  fs.rename(req.files[0].Pfad, neuerName, Funktion (err) {
    wenn (Fehler) {
      res.send({ code: 0, msg: "Upload fehlgeschlagen", data: [] });
    } anders {
      res.send({ code: 1, msg: "Upload erfolgreich", data: newName });
    }
  });
});
// Datei herunterladen app.get('/download', function(req, res) {
  res.download('./public/test.xls');
});

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

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

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

 <Eingabetyp="Datei" @change="changeHandler($event)"/>
     changeHandler(Ereignis) {
      let Dateien = Ereignis.Ziel.Dateien[0];
      console.log("Dateien",Dateien)
      let data = neue FormData();
      data.append(Dateien.Name,Dateien);
      console.log("Daten",Daten)
      axios.post("http://localhost:9527/upload",Daten,{
        Überschriften:{
          "Inhaltstyp": "multipart/Formulardaten"
        }
      }).dann(res =>{
        konsole.log("res",res)
      })
    }, 

 <input type="button" value="Zum Herunterladen klicken" @click="handleDownload">
      handleDownload() {  
    axios({  
      Methode: 'get',  
      URL: "http://localhost:9527/download",  
      Daten: {    
        test: "Testdaten"  
      },  
      responseType: "arraybuffer" // arraybuffer ist eine Schnittstelle zur Verarbeitung von Binärdaten in js}).then(response => {          
      // Erstellen Sie eine Blob-Instanz mit den zurückgegebenen Binärdaten if(!response) return;
      let blob = neuer Blob([Antwort.Daten], {            
        Typ: „application/vnd.openxmlformats-officedocument.spreadsheetml.sheet“, 
      }) // für .xlsx-Dateien          
      // Dateipfad über URL.createObjectURL generieren let url = window.URL.createObjectURL(blob) 
      Konsole.log("url==========",URL)        
      // Ein Tag erstellen let ele = document.createElement("a")          
      ele.style.display = "keine"          
      // Setze das href-Attribut auf den Dateipfad und das Download-Attribut auf den Dateinamen ele.href = url          
      ele.download = dieser.name          
      // Füge der Seite das a-Tag hinzu und simuliere einen Klick document.querySelectorAll("body")[0].appendChild(ele)          
      ele.klick()          
      // Entferne das A-Tag ele.remove()        
    });
  }, 

 // Binäre Stream-Bilddatei herunterladen downLoadImg() {
     axios({
        Methode: 'get',
        URL: `http://localhost:9527/download/img`,
        Antworttyp: "Array-Puffer",
        Parameter: {
          ID: 12
        }
      }).dann(res => {
        var src = "data:image/jpg;base64," + btoa(neues Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
       // this.srcImg = src // Bildanzeige var a = document.createElement('a')
        a.href = src
        a.download = "2.jpg"
        ein.Klick()
        a.entfernen()
      })
    }