解決使用element文件上傳后，根據狀態判斷是否上傳成功，上傳失敗的文件從文件列表移出

• 背景

  測試發現，無論上傳成功上傳失敗顯示的都會生成列表，並且失敗了的也出現在了列表中，也沒有任何的提示；看官方文檔發現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