Vue implementiert das Hoch- und Herunterladen von Dateien

<el-dialog :title="AddName" :visible.sync="dialogAddFile" width="500px" style="padding:0;" @close="ResetAdd">
               Name des Anhangs: <el-input v-model="addFileName" autocomplete="off" size="small" style="width: 300px;" ></el-input>
                <div Klasse = "Datei rechts hinzufügen" Stil = "Höhe: 70px;Rand links: 100px;Rand oben: 15px;">
                    <div class="add-file-right-img" style="margin-left:70px;">Datei hochladen:</div>
                    <Eingabetyp="Datei" ref="clearFile" @change="getFile($event)" mehrere="multiplt" Klasse="add-file-right-input" Stil="margin-left:70px;" akzeptieren=".docx,.doc,.pdf">
                    <span class="add-file-right-more">Unterstützte Erweiterungen: .doc .docx .pdf </span>
                </div>
                <div Klasse="Dateiliste hinzufügen">
                    <ul>
                        <li v-for="(Artikel, Index) in addArr" :key="index"><a >{{Artikel.name}}</a></li>
                    </ul>
                </div>
                <div slot="Fußzeile" class="dialog-footer">
                    <el-button type="primary" @click="submitAddFile" size="small">Hochladen starten</el-button>
                    <el-button @click="resetAdd" size="small">Alle löschen</el-button>
               </div>
</el-dialog>

getFile(Ereignis){
           var Datei = Ereignis.Ziel.Dateien;
           für(var i = 0;i<Dateilänge;i++){
            // Beurteilung des Upload-Typs var imgName = file[i].name;
                var idx = imgName.lastIndexOf(".");  
                wenn (idx != -1){
                    var ext = imgName.substr(idx+1).toUpperCase();   
                    ext = ext.toLowerCase(); 
                     wenn (ext!='pdf' && ext!='doc' && ext!='docx'){
                       
                    }anders{
                          dies.addArr.push(Datei[i]);
                    }   
                }anders{
 
                }
           }
       },

sendeAddFile(){
           wenn(0 == diese.addArr.length){
             diese.$nachricht({
               Typ: "Info",
               Meldung: „Bitte wählen Sie die hochzuladende Datei aus“
             });
             zurückkehren;
           }
 
            var formData = neue FormData();
            formData.append('num', this.addType);
            formData.append('linkId',this.addId);
            formData.append('rfilename',this.addFileName);
            für(var i=0;i<this.addArr.length;i++){
                formData.append('fileUpload',this.addArr[i]);
            }
          let konfiguration = {
            Überschriften: {
              'Inhaltstyp': 'multipart/Formulardaten',
              „Autorisierung“: this.token
            }
          };
          dies.axios.post(apidate.uploadEnclosure,formData,config)
            .then((Antwort) => {
                wenn(response.data.info=="Erfolg"){diese.$message({
                        Typ: "Erfolg",
                        Meldung: „Anhang erfolgreich hochgeladen!“
                    });
                }
            })
        }

<div Klasse="Über-Datei">
    <div class="about-file-title">Zugehörige Materialien</div>
    <ul>
        <li v-for="(Element, Index) in zehnAnlagen.Zeilen" :key="index">
              <a target="_self" >{{item.tenPencSourname}}</a>
              <span @click="toxiazai(index,4,item.tenureId)" title="Herunterladen"></span>
              <span @click="toshanchu(index,4,item.tenureId)" title="Löschen"></span>
       </li>
   </ul>
</div>

toxiazai(index,num,id){
          var tempForm = document.createElement("form"); //Erstellen Sie ein Formular und folgen Sie den verschiedenen Parametern des Formulars tempForm.id = "tempForm1";
          tempForm.method = "posten";
          tempForm.action = apidate.downloadEnclosure;
          tempForm.target="_";
          var hideInput1 = document.createElement("Eingabe");
          hideInput1.setAttribute('Typ','versteckt');
          hideInput1.setAttribute('name','linkId');
          hideInput1.setAttribute('id','linkId');
          hideInput1.setAttribute('Wert',id);
          tempForm.appendChild(hideInput1);
 
          var hideInput2 = document.createElement("Eingabe");
          hideInput2.setAttribute('Typ','versteckt');
          hideInput2.setAttribute('name','num');
          hideInput2.setAttribute('id','num');
          hideInput2.setAttribute('Wert',Anzahl);
          tempForm.appendChild(hideInput2);
 
 
          wenn(Dokument.alles){
            tempForm.attachEvent("onsubmit",function(){}); //IE
          }anders{
            var subObj = tempForm.addEventListener("senden",function(){},false); //Firefox
          }
          Dokument.Body.AppendChild(tempForm);
          wenn(Dokument.alles){
            tempForm.fireEvent("onsubmit");
          }anders{
            tempForm.dispatchEvent(neues Ereignis("Senden"));
          }
          tempForm.submit();//POST-Anfrage sendendocument.body.removeChild(tempForm);
},

<ul>
     <li v-for="(Element, Index) in Hinweisliste" v-bind:key="index" Klasse="Personenliste" @click="Hinweis(Index)">
          <div Klasse="Personenlistenname">
              <a v-bind:href="[filePrefix+item.uuid_name]" rel="externes nofollow" rel="externes nofollow" >{{item.file_name}}</a>
         </div>
         <div class="person-list-time">Upload-Zeit: {{item.create_time}}</div>
     </li>
</ul>

<div Klasse="Liste-Bild">
                <ul>
                    <li v-for="(Element, Index) in imgArr" :Schlüssel="Index">
                        <img :src="item.path" alt="" >
                        <a @click="todel(index)"></a>
                    </li>
           <li>
            <div Klasse="addImg" v-if="imgArr.length<3">
                  <span class="add">Bild hochladen</span>
                  <span class="add">(Bis zu 3 Fotos hochladen)</span>
                  <Eingabetyp="Datei" @change="getFile($event)" akzeptieren=".jpg,.png,.bmp,.gif">
             </div>
         </li>
     </ul>
</div>

getFile(Ereignis){
            var Datei = Ereignis.Ziel.Dateien;
            für(var i = 0;i<Dateilänge;i++){
               // Beurteilung des Upload-Typs var imgName = file[i].name;
                var idx = imgName.lastIndexOf(".");  
                wenn (idx != -1){
                    var ext = imgName.substr(idx+1).toUpperCase();   
                    ext = ext.toLowerCase(); 
                    wenn (ext!='jpg' && ext!='png' && ext!='bmp' && ext!='gif'){
                        
                    }anders{
                            dies.imgArr.push(Datei[i]);
                    }   
                }anders{
 
                }
            }
        },

getFile(Ereignis){
            var Datei = Ereignis.Ziel.Dateien;
            lass das = dies;
            für(var i = 0;i<Dateilänge;i++){
               // Beurteilung des Upload-Typs var imgName = file[i].name;
                var idx = imgName.lastIndexOf(".");  
                wenn (idx != -1){
                    var ext = imgName.substr(idx+1).toUpperCase();   
                    ext = ext.toLowerCase(); 
                    wenn (ext!='jpg' && ext!='png' && ext!='bmp' && ext!='gif'){
                        
                    }anders{
                            das.imgArr.push(Datei[i]);
                    }   
                }anders{
 
                }
                //Hochgeladene Bilder anzeigen let reader = new FileReader()
                Leser.readAsDataURL(Datei[i])
                reader.onload = Funktion(e) {
                    das.imgShow.push(dieses.Ergebnis);
                }
            }
        },