Detaillierte Erklärung zum manuellen Hochladen von Excel-Dateien auf den Server mit Vue ElementUI

<el-Zeile>
    <div Klasse="el-form-item__content">
        <el-upload ref="hochladen"
            akzeptieren=".xls,.xlsx"
            Aktion=""
            :auto-upload="false"
            :mehrere="falsch"
            :file-list="Dateiliste"
            :before-upload="vor dem Hochladen"
            :http-request="HttpRequest hochladen"
            :on-remove="Datei entfernen"
            :on-change="Dateiänderung">
            <el-button size="small" type="primary">Datei auswählen</el-button>
            <div slot="tip" class="el-upload__tip">Es kann jeweils nur eine xls/xlsx-Datei hochgeladen werden und die Dateigröße sollte 10 MB nicht überschreiten</div>
        </el-upload>
    </div>
</el-row>
<el-Zeile>
    <el-button size="small" @click="closeDialog">Abbrechen</el-button>
    <el-button type="primary" size="small" @click="submitUpload">Hochladen</el-button>
    <el-button type="primary" size="small" @click="downloadRes">Feedback-Ergebnisse herunterladen</el-button>
</el-row>

Methoden: {
    // Hook vor dem Hochladen von Dateien: Bestimmen Sie das Format und die Größe der hochgeladenen Datei und stoppen Sie den Upload, wenn false zurückgegeben wird beforeUpload(file) {
        //Dateityp const isType = file.type === 'application/vnd.ms-excel'
        const isTypeComputer = Datei.Typ === 'Anwendung/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        const Dateityp = istTyp || istTypComputer
        if(!Dateityp) {
            this.$message.error('Hochgeladene Dateien können nur im xls/xlsx-Format vorliegen!')
        }

        // Die Dateigrößenbeschränkung beträgt 10 MB.
        const fileLimit = Dateigröße / 1024 / 1024 < 10;
        wenn(!DateiLimit) {
            this.$message.error('Die hochgeladene Datei ist nicht größer als 10 MB!');
        }
        returniere Dateityp && Dateilimit
    },
    // Benutzerdefinierte Upload-Methode, param ist der Standardparameter, Sie können die Dateiinformationen abrufen, die spezifischen Informationen lauten wie folgt: uploadHttpRequest(param) {
        const formData = new FormData() //FormData-Objekt, das Hinzufügen von Parametern kann nur über append('key', value) erfolgen formData.append('file', param.file) //Dateiobjekt hinzufügen formData.append('uploadType', this.rulesType)
        const url = `${this.myBaseURL}/operation/ruleImport/importData` //Upload-Adresse axios.post(url, formData)
            .dann( res => {
                const { Daten: { Code, Markierung } } = res
                wenn(code === 0) {
                    param.onSuccess() // Erfolgreich hochgeladene Dateien werden mit einem grünen Häkchen markiert this.uploadMark = mark
                }
                return this.countData(this.uploadMark) //Rufen Sie die Schnittstelle für Statistikergebnisse entsprechend dem Markierungswert der Antwort auf und geben Sie ein Versprechen für den Kettenaufruf zurück})
            .then( res => { //Kettenaufruf, Antwort auf statistische Ergebnisse const { data: { code, data } } = res
                wenn(code === 0) {
                    console.log('Statistische Ergebnisse', Daten)
                }
            })
            .catch( err => {
                console.log('fehlgeschlagen', Fehler)
                param.onError() //Dateien, deren Upload fehlgeschlagen ist, werden aus der Dateiliste gelöscht})
    },
    // Statistische Ergebnisse countFile(mark) {
        returniere neues Promise((lösen, ablehnen) => {
            Achsen
                .get(`/operation/ruleImport/countData?mark=${mark}`)
                .then(res => {
                    Entschlossenheit (res)
                })
                .catch(Fehler => {
                    ablehnen(Fehler)
                })
        })
    },
    // Zum Hochladen klicken: Manuelles Hochladen auf den Server, wodurch die HTTP-Anfrage der Komponente ausgelöst wird
    sendeUpload() {
        dies.$refs.upload.submit()
    },
    // Die Datei ändert sich fileChange(file, fileList) {
        if (Dateiliste.Länge > 0) {
            this.fileList = [fileList[fileList.length - 1]] // Die letzte ausgewählte Datei anzeigen}
    },
    // Entferne die ausgewählten Dateien fileRemove(file, fileList) {
        wenn(Dateiliste.Länge < 1) {
            this.uploadDisabled = true // Deaktiviere den Upload-Button, wenn keine Datei ausgewählt ist}
    },
    //Abbrechen closeDialog() {
        this.$refs.upload.clearFiles() //Hochgeladenes Dateiobjekt löschen this.fileList = [] //Ausgewählte Dateiliste löschen this.$emit('close', false)
    }
}