element-UI上传组件-js删除上传失败的文件列表

这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

el-upload 上传失败后，文件仍显示在列表上，这个失败定义是指文件解析出错，并非组件和网络问题

这个pdf文件上传失败，仍显示在列表，给人错觉是上传成功的，所以，我们把它去掉~，下面上代码：

<el-upload
	class="upload-file padding"
	ref="uploadFile"
	multiple
	accept="image/jpeg,image/png,image/gif,application/pdf"
	:http-request="uploadFile"
	:on-change="onChange"
	:before-upload="beforeuploadFile"
	action="123"
	:disabled="!isDisabled"
	:on-remove="handleRemove"
	:file-list="ruleForm.commission">
	<el-button type="primary" size="mini" :loading="uploadLoding" :disabled="!isDisabled">上传</el-button>
	<div slot="tip" class="el-upload__tip" style="line-height: 1; margin: 0 0 10px;">注:只能上传图片或pdf文件</div>
</el-upload>

<script>
//移除文件
handleRemove (file, fileList) {
    this.ruleForm.commission = fileList
    // this.ruleForm.fileName = '' // 用于校验
},
//上传文件变化时的钩子，这里需要注意的是上传过程中文件变化状态有好几种，都会触发这个函数
onChange (file, fileList) {
  this.files = fileList
},
// 手动定义上传上传
uploadFile (fileObj) { 
	let file = fileObj.file
	uploadImageInfo({ file: file, width: 165, height: 245, caseId: this.caseId, taskId: this.taskId }).then(res => {
          if (res.success && res.data) {
          	// 后端接口返回后逻辑-todo
              const obj = {
                  name: '文件名.pdf', // 文件名带后缀
                  url: data.path, // 文件路径
              }
              this.ruleForm.commission.push(obj) // 显示用的
          }
      }).catch(err => {
          console.log(err)
          let uid = file.uid // 关键作用代码，去除文件列表失败文件
          let idx = this.$refs.uploadFile.uploadFiles.findIndex(item => item.uid === uid) // 关键作用代码，去除文件列表失败文件（uploadFiles为el-upload中的ref值）

          this.$refs.uploadFile.uploadFiles.splice(idx, 1) // 关键作用代码，去除文件列表失败文件

      })
}
</script>

按照以上代码操作，完美地去掉了失败文件，最关键的一句代码：

this.$refs.uploadFile.uploadFiles.splice(idx, 1)

总结：翻了官方文档，没有看到处理方法，之所以这么处理，是因为显示的fileList列表并不是我赋值数据需要显示的列表

补充知识点：

element上传change事件官方的PAI文档

文档中也清新的说明了change事件被触发的三种状态，添加文件，上传成功，上传失败都会被触发，

handleUploadChange: function(info) {
       const file = info.file;
    if (file.status === 'uploading') {
       console.log('正在上传文件', info);
    } else if (file.status === 'error') {
       this.$notification.error({ message: '上传文件出错', description: JSON.stringify(info) });
    } else if (file.status === 'done') {
       console.log('上传完成', info);
       //如果倒入数据的话file.response可以在做进一步数据判断处理
       const response = file.response;
       if (response.success) {
          if (response.data.status == 1) {
              console.log('倒入成功');
          }else if (response.data.status == 2) {
              console.log('倒入完成');
          }else{
              console.log('倒入失败');
          }
    } else {
     this.$notification.error({ message: '上传失败', description: response.msg });

    }