el-upload組件預設情況下上傳多少個文件就會請求多少次上傳介面,如何一次上傳多個文件而不必多次請求上傳介面呢?直接看代碼 html <el-upload :action="actionUrl" :auto-upload="false" :multiple="true" :file-list=" ...
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()
})
}