Vue implementiert Funktionen zum Hoch- und Herunterladen von Dateien

let URL = Fenster.URL || Fenster.webkitURL;
let downloadUrl = URL.createObjectURL(blob || Datei);

downloadUrl && URL.revokeObjectURL(downloadUrl);

<Vorlage>
    <div Klasse="btn-box">
        <h3>Dateiupload:</h3>
        <input Klasse="file-input" Typ="Datei" @change="getFile($event)" />
        <el-button type="primary" @click="upload">Datei hochladen (POST)</el-button>
        <h3>Dateidownload:</h3>
        <el-button type="primary" @click="downloadLink">Laden Sie die verknüpfte Datei herunter (window.open)</el-button>
        <el-button type="primary" @click="downloadBlobByGet">Binärer Stream-Download (GET)</el-button>
        <el-button type="primary" @click="downloadBlobByPost">Binärer Stream-Download (POST)</el-button>
    </div>
</Vorlage>
 
<Skript>
    Axios von „Axios“ importieren
    Standard exportieren {
        Name: "attendPoint",
        Daten() {
            zurückkehren {,
                Datei: null,
                Dateiname: "test.xlsx"
            }
        },
        Methoden: {
            // Datei auswählen getFile(event) {
                diese.Datei = Ereignis.Ziel.Dateien[0];
            },
 
            // Datei hochladen (POST)
            hochladen() {
                let url = "http://localhost:3000/upload/test";
                let formData = neue FormData();
                formData.append("name", "zhangsan");
                formData.append("Alter", "18");
                formData.append("Datei", diese.Datei);
                let konfiguration = {
                    Überschriften: {
                        "Inhaltstyp": "multipart/Formulardaten"
                    }
                }
                axios.post(url, formData, config).then((res) => {
                    dieser.Dateiname = res.data.downloadUrl;
                    this.$message.success("Upload erfolgreich!");
                }).catch(() => {
                    this.$message.error("Bitte laden Sie zuerst die Datei hoch!");
                })
            },
 
            // Lade die Datei mit dem Link herunter (window.open)
            downloadLink() {
                wenn (dieser.Dateiname) {
                    Fenster.öffnen("http://localhost:3000/download/test?fileName=" + dieser.fileName);
                }
            },
 
            //Binärer Stream herunterladen (GET)
            asynchroner Download von BlobByGet() {
                let urlGet = "http://localhost:3000/download/test?fileName=" + dieser.fileName;
                Lassen Sie fileData = await axios.get(urlGet, { responseType: "blob" });
                let URL = Fenster.URL || Fenster.webkitURL;
                let downloadUrl = URL.createObjectURL(fileData.data);
                sei a = document.createElement("a");
                a.href = Download-URL;
                a.download = this.fileName; //Dateiname nach dem Download a.click();
                a = null;
                downloadUrl && URL.revokeObjectURL(downloadUrl);
            },
 
            //Binärer Stream-Download (POST)
            asynchroner Download von BlobByPost() {
                let urlPost = "http://localhost:3000/download/post/test";
                lass fileData = warte auf axios({
                    Methode: "post",
                    url: urlPost, // Anfrageadresse data: { fileName: this.fileName }, // Parameter responseType: "blob" // gibt den vom Server zurückgegebenen Datentyp an })
                let URL = Fenster.URL || Fenster.webkitURL;
                let downloadUrl = URL.createObjectURL(fileData.data);
                sei a = document.createElement("a");
                a.download = dieser.Dateiname;
                a.href = Download-URL;
                ein.Klick();
                a = null;
                downloadUrl && URL.revokeObjectURL(downloadUrl);
            },
        },
    }
</Skript>
 
<Stilbereich>
    .btn-box {
        Polsterung: 20px;
    }
    .el-Schaltfläche,
    Eingabe {
        maximale Breite: Inhalt anpassen;
        Anzeige: Block;
        Rand: 20px;
    }
</Stil>