vue+el-upload realisiert den dynamischen Upload mehrerer Dateien

<div Klasse="vue-box">
           <div Klasse="Titelzeile">
                            Weitere erforderliche Zertifikate<el-button type="primary" size="mini" style="height: 20px;padding-top: 3px !important;margin-left: 50px" icon="el-icon-plus" @click="handleAddDetails">Zeile hinzufügen</el-button>
                            <el-button type="primary" size="mini" style="height: 20px;padding-top: 3px !important;margin-left: 50px" icon="el-icon-plus" @click="doFileUpload()">Hochladen</el-button>
            </div>
            <el-Tabelle
                    :row-class-name="ZeilenklassennameDeal"
                    :data="Tabellendaten"
                    Stil="Breite: 100%;">
                <el-table-column
                        prop="Ich würde"
                        Breite="50"
                        label="Seriennummer">
                </el-Tabellenspalte>
                <el-table-column
                        prop="Kartenname"
                        Breite="180"
                        label="Zertifikatsname">
                    <!--<template slot-scope="Umfang">
                        <el-input Größe="mini" v-model="tableData[scope.row.id-1].cardName"></el-input>
                    </template>-->
                </el-Tabellenspalte>
                <el-table-column
                        prop="Kartennr"
                        Breite="180"
                        label="ID-Nummer">
                    <!--<template slot-scope="Umfang">
                        <el-input Größe="mini" v-model="tableData[scope.row.id-1].cardNo"></el-input>
                    </template>-->
                </el-Tabellenspalte>
                <el-table-column
                        prop="Startdatum"
                        Breite="180"
                        label="Startdatum">
                    <!--<template slot-scope="Umfang">
                        <el-Datumsauswahl
                                v-Modell = "tableData[scope.row.id-1].startDate"
                                Stil="Breite: 80%;"
                                Größe="mini"
                                Werteformat="jjjj-MM-tt"
                                Typ="Datum"
                                Platzhalter="Datum auswählen">
                        </el-Datumsauswahl>
                    </template>-->
                </el-Tabellenspalte>
                <el-table-column
                        prop="Enddatum"
                        Breite="180"
                        label="Enddatum">
                    <!--<template slot-scope="Umfang">
                        <el-Datumsauswahl
                                v-Modell = "tableData[scope.row.id-1].endDate"
                                Stil="Breite: 80%;"
                                Größe="mini"
                                Werteformat="jjjj-MM-tt"
                                Typ="Datum"
                                Platzhalter="Datum auswählen">
                        </el-Datumsauswahl>
                    </template>-->
                </el-Tabellenspalte>
                <el-table-column
                        prop="Adresse"
                        label="Anhang">
                    <template slot-scope="Umfang">
                        <el-hochladen
                                :ref="Bereich.Zeile.Kartenname"
                                :http-request="dynamischerUpload"
                                :before-upload="vorUploadDatei(Umfang.Zeile)"
                                :on-remove="hochladenEntfernen"
                                :before-remove="HochladenVorEntfernen"
                                :on-preview="uploadVorschau"
                                Name="Hochladen"
                                :Grenze="1"
                                :data="Umfang.Zeile.Kartenname"
                                :on-exceed="uploadHandleExceed"
                                :file-list="tableData[scope.row.id-1].fileUploadedList">
                            <el-button size="mini" type="info">Zum Hochladen klicken</el-button>
                        </el-upload>
                    </Vorlage>
                </el-Tabellenspalte>
                <el-table-column
                        prop="Datum"
                        Breite="80"
                        label="Aktion">
                    <template slot-scope="Umfang">
                        <el-button size="mini" type="warning" @click="handleDeleteDetails(scope.row)">Löschen</el-button>
                    </Vorlage>
                </el-Tabellenspalte>
            </el-Tabelle>
            
            <el-dialog title="Zertifikatsinformationen" :visible.sync="addCardVisible" width="40%">
                <el-form :model="Dateiinfo">
                    <el-form-item label="Zertifikatsname" :label-width="Etikettenbreite">
                        <el-input v-model="fileInfo.cardName" autocomplete="aus" style="width: 100%;"></el-input>
                    </el-form-item>
                    <el-form-item label="ID-Nummer" :label-width="Etikettenbreite">
                        <el-input v-model="fileInfo.cardNo" autocomplete="aus" style="width: 100%;"></el-input>
                    </el-form-item>
                    <el-form-item label="Datum des Inkrafttretens" :label-width="Etikettenbreite">
                        <el-date-picker type="date" placeholder="Datum des Inkrafttretens" value-format="yyyy-MM-dd" v-model="fileInfo.startDate" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="Ablaufdatum" :label-width="Etikettenbreite">
                        <el-date-picker type="date" placeholder="Ablaufdatum" value-format="yyyy-MM-dd" v-model="fileInfo.endDate" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-form>
                <div slot="Fußzeile" class="dialog-footer">
                    <el-button @click="addCardVisible = false">Abbrechen</el-button>
                    <el-button type="primary" @click="addFileDetail">OK</el-button>
                </div>
            </el-dialog>
</div>

let nodeVue = neues Vue({
    el: ".vue-box",
    Daten: {
        Beschriftungsbreite: '150px',
        Tabellendaten: [],
        Upload-Parameter: {
            Dateitagname: ''
        },
        Gesamtdateiliste:[],
        totalFileNameList:[],
        addCardVisible:false,
        DateiInfo:{
            Kartenname:'',
            Kartennummer:'',
            Startdatum:'',
            Enddatum:''
        }
    },
    Methoden:{
        // Dateibezogener UploadRemove:function(file) {
            lass das = dies;
            // Dateien in der Dateiliste löschen for(let i=0;i<that.totalFileNameList.length;i++){
                wenn (das.totalFileNameList[i].fileName === datei.name) {
                    das.totalFileNameList.splice(i,1)
                }
            }
            für (lass i = 0; i < that.totalFileList.length; i++) {
                wenn (das.totalFileList[i].name === datei.name) {
                    das.totalFileList.splice(i,1)
                }
            }
        },
        // Dateiparametereinstellungen hochladen beforeUploadFile:function(row) {
            Konsole.log(Zeile.Kartenname);
            this.uploadParams.fileTagName=Zeile.Kartenname
            this.uploadParams.fid=Zeile.id
        },
        // Dateien herunterladen. Klicken Sie zum Herunterladen auf die Datei in der Dateiliste. uploadPreview:function(file){
            console.log(Datei);
        },
        uploadHandleExceed:Funktion(Dateien, Dateiliste) {
            this.$message.warning(`Derzeit auf 1 Dateiauswahl beschränkt`);
        },
        uploadBeforeRemove:Funktion(Datei) {
            return this.$confirm(`Sind Sie sicher, dass Sie ${ file.name } entfernen möchten?`);
        },
        // Fügen Sie eine Anhangszeile hinzu und öffnen Sie das Popup-Fenster „Zeile hinzufügen“. handleAddDetails(){
            lass das = dies;
            das.addCardVisible = true;
            that.fileInfo.cardName = '';
            that.fileInfo.cardNo = '';
            das.fileInfo.startDate = '';
            das.fileInfo.endDate = '';
        },
        // Füge eine Zeile zur Tabelle data hinzu addFileDetail(){
            lass das = dies;
            wenn (das.tableData == undefiniert) {
                das.tableData = neues Array();
            }
            lass obj = {};
            Objekt-ID = 0;
            obj.cardName = das.fileInfo.cardName;
            obj.cardNo = diese.fileInfo.cardNo;
            obj.startDate = das.fileInfo.startDate;
            obj.endDate = das.fileInfo.endDate;
            obj.fileUploadedList=[];
            das.tableData.push(obj);
            das.addCardVisible = false;
        },
        // Zeile löschen handleDeleteDetails(row){
            lass das = dies;
            das.tableData.splice(row.id-1, 1);
            // Daten in der Dateiliste und der zugehörigen Liste gleichzeitig löschen let tmpFileName = '';
            für (lass i = 0; i < that.totalFileNameList.length; i++) {
                wenn (das.totalFileNameList[i].cardName === row.cardName) {
                    tmpFileName = that.totalFileNameList[i].fileName; // Vorübergehend speichern und dann löschen that.totalFileNameList.splice(i,1);
                }
            }
            für (lass i = 0; i < that.totalFileList.length; i++) {
                wenn (das.totalFileList[i].name === tmpFileName) {
                    das.totalFileList.splice(i,1)
                }
            }
        },
        ZeilenklassennameDeal({Zeile, Zeilenindex}) { 
            //Setze den Index jeder Zeile in row.id ein. Diese Methode wird verwendet, um die Seriennummer in der Tabelle zu generieren. Beim Ausfüllen des Inhalts in der Tabelle muss jede Zeile an ein anderes V-Modell gebunden werden
            Zeile.id = Zeilenindex+1;
        },
        // Benutzerdefinierter Upload, speichere die Datei nur vorübergehend im Frontend dynamicUpload(content){
            lass das = dies;
            wenn(Inhalt.Daten.Länge === 0){
                that.$message.warning(`Bitte geben Sie den Namen des Zertifikats ein!!!`);
                das.$refs[content.data].clearFiles();
                gibt false zurück;
            }
            für (lass i = 0; i < that.totalFileNameList.length; i++) {
                wenn (das.totalFileNameList[i].fileName === inhalt.datei.name) {
                    that.$message.warning('Die Datei wurde hochgeladen. Bitte wählen Sie die hochzuladende Datei erneut aus!!!');
                    das.$refs[content.data].clearFiles();
                    gibt false zurück;
                }
            }
            // Fügen Sie die Datei zur Liste der zu übertragenden Dateien hinzu that.totalFileList.push(content.file)
            let DateinameDaten = {
                Kartenname: Inhalt.Daten,
                Dateiname: Inhalt.Dateiname
            }
            // totalFileNameList speichert die Beziehung zwischen Dateien und Tabelleninhalten. Hier wird nur der Lizenzname zugeordnet that.totalFileNameList.push(fileNameData)
        },
        // Führe den Upload-Vorgang aus und sende die Datei- und Tabelleninformationen an den Hintergrund doFileUpload(){
            lass das = dies;
            wenn (das.totalFileList.length === 0) {
                that.$message.warning("Bitte laden Sie die Datei hoch!!!");
                zurückkehren;
            }
            // Um ​​eine Datei hochzuladen, müssen Sie FormData verwenden. Die Parameter processData und contentType müssen festgelegt sein, sonst schlägt der Upload fehl const params = new FormData();
            // Benennen Sie jede hochgeladene Datei, um die Zuordnung zu den Tabellendaten zu erleichtern, wenn das Backend sie erhält for (let i = 0; i < that.totalFileList.length; i++) {
                params.append(das.totalFileList[i].name, das.totalFileList[i]);
            }
            params.append("fileNameList", JSON.stringify(that.totalFileNameList));
            $.ajax({
                url:baseurl+"/testupload/Dateiupload",
                Typ: „POST“,
                Datentyp: "json",
                processData: false, //Wird zum Serialisieren des Datenparameters verwendet. Dies muss „false“ sein.
                contentType: false, //Erforderliche Daten: Parameter,
                Erfolg:Funktion(res){
                    that.$message.warning('Upload erfolgreich');
                }
            });
        }
    },
    erstellt: function(){       
    }
})

@Regler
@RequestMapping("/testupload")
öffentliche Klasse RegisterController {

 // Der Anhang wird aus der Anfrage abgerufen @RequestMapping("/fileUpload")
    @AntwortBody
    öffentliche ServerResponse-Dateiupload (HttpServletRequest-Anforderung, String-Dateinamenliste) {
        versuchen{
            wenn(fileNameList == null){
                throw new Exception("Bitte wählen Sie die Datei vor dem Hochladen aus!!!");
            }
            // 1. Upload-Speicherort String path = "E:\\uploadfile";
            //Beurteilen, ob der Pfad existiert. File file = new File(path);
            wenn (!file.exists()) {
                Datei.mkdirs();
            }
            // Verarbeiten Sie die zugehörigen Dateninformationen, die in Zeichenfolgenform hochgeladen wurden JSONArray jsonArray = JSON.parseArray(fileNameList);
            // Durchlaufe die Assoziationsliste für (Object object : jsonArray){
                JSONObject jsonObject = JSON.parseObject(Objekt.toString());
                System.out.println(jsonObject.getString("Kartenname"));
                // Datei abrufen MultipartFile file1 = ((MultipartHttpServletRequest) request).getFile(jsonObject.getString("fileName"));
                // Dateiinformationen abrufen String filename = file1.getOriginalFilename();
                System.out.println(Dateiname);
                // Datei speichern file1.transferTo(new File(path, filename));
            }
        }catch (Ausnahme e) {
            log.error(e.getMessage());
            returniere ServerResponse.createByErrorMessage(e.getMessage());
        }
        returniere ServerResponse.createBySuccess();
    }
}