el-upload控制元件一次介面請求上傳多個檔案

el-upload元件預設情況下上傳多少個檔案就會請求多少次上傳介面，如何一次上傳多個檔案而不必多次請求上傳介面呢？直接看程式碼

html

<el-upload :action="actionUrl" :auto-upload="false" :multiple="true" :file-list="fileList" :on-change="onChange" :on-remove="onRemove" :on-exceed="OnExceed" ref="upload" list-type="picture" :limit="10">
<button>上傳附件文件</button>
<span>注意：支援jpg，png格式</span>
</el-upload>

js 

onChange(file, fileList) { //這裡做一些檔案控制，注意：就算一次選取多個檔案，這裡依舊會執行多次
　　const isJPG = file.raw.type === `image/jpeg`;
　　if (!isJPG) {
　　　　this.$message.error(`上傳頭像圖片只能是 JPG 格式!`);
　　　　fileList.pop()
　　}
　　let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)
　　if (existFile) {
　　　　this.$message.error(`當前檔案已經存在!`);
　　　　fileList.pop()
　　}
　　this.fileList = fileList
},

onRemove(file, fileList) {
　　this.fileList = fileList
},

OnExceed(file, fileList) {
　　this.$message.error(`最多隻能上傳10張圖片!`);
},

submitUpload() {   //上傳函式，如果把提交函式用在http-request鉤子中，fileList多長就執行請求多少次介面，依舊是無法做到只請求一次上傳多檔案
　　var formData = new FormData();  //  用FormData存放上傳檔案

　　this.fileList.forEach(file => { 
　　　　　　formData.append(`reportFile`, file.raw, file.raw.name); //此處一定是append file.raw 上傳檔案只需維護fileList file.raw.name要加上 
　　}) 
　　uploadFiles(formData).then(res => { //手動上傳貌似無法觸發成功或失敗的鉤子函式，因此這裡手動呼叫 
　　this.onSuccess() 
}).catch(err => {
　　 console.log(err)
　　 this.onError() 
})
}

 一些注意的關鍵點都已經寫在註釋了，還有一點需要注意的，如果把el-upload用在el-form內，點選上傳的時候回重新整理路由，目前還沒找到解決辦法，以上都是踩的一些小坑，希望對大家有幫助！！！