解决使用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

标签：文件,console,fileList,element,blog,上传,response
来源： https://www.cnblogs.com/chengqiang521/p/15714954.html