解決使用element檔案上傳後，根據狀態判斷是否上傳成功，上傳失敗的檔案從檔案列表移出
阿新 • • 發佈：2021-12-21
-
背景
測試發現，無論上傳成功上傳失敗顯示的都會生成列表，並且失敗了的也出現在了列表中，也沒有任何的提示；看官方文件發現on-success鉤子的函式中function(response, file, fileList)第一個引數是response，也就是後臺給我們返回的結果。修改on-success鉤子
/* * 根據陣列物件屬性刪除對應項 * @param {Array} arr - 單個檔案上傳大伺服器返回的結果物件 * @param {String} attr - 單個檔案物件 * @param {Array} fileList -檔案上傳的列表（所有選擇的檔案) * @return void */ uploadFileSuccess(response, file, fileList){ // console.log(response) if(response.meta.status==200){ // console.log("檔案上傳成功",response) this.$message.success(response.data.ProductFile.UploadOldName+"：檔案上傳成功"); console.log(fileList) // console.log(file) }else{ this.$message.error(response.data.ProductFile.UploadOldName+"：上傳失敗，請重新上傳"); //刪除上傳列表中，失敗的檔案 let index = 0; for(const i in fileList){ if(fileList[i]==file){ index=i; break; } } //移出當前檔案物件 fileList.splice(index,1); // this.$refs.uploadFile.clearFiles(); } },
附上元件
<el-upload class="upload-demo" ref="uploadFile" :data="ProductFileUploadData" action="http://localhost:8082/api/Product/FileUpload" :on-preview="FilehandlePreview" :on-remove="FilehandleRemove" :before-remove="FilebeforeRemove" multiple :on-error="uploadFileError" :on-success="uploadFileSuccess" accept=".png,.jpg,.gif,jpeg,.bmp" :on-exceed="FilehandleExceed" :file-list="fileUploadList"> <el-button size="small" type="primary">點選上傳</el-button> <div slot="tip" class="el-upload__tip">只能上傳jpg/png檔案，且不超過500kb</div> </el-upload>
測試後正常，上傳錯誤提示，並移出了列表
檔案上傳參考文章地址
https://blog.csdn.net/DcTbnk/article/details/109455943
刪除物件參考文章地址
https://blog.csdn.net/weixin_44198965/article/details/111476673?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0.no_search_link&spm=1001.2101.3001.4242.1
https://blog.csdn.net/weixin_45393094/article/details/109682648