【问题记录】ElementUI上传组件使用beforeupload钩子校验失败时的问题处理

一、开发环境

1、Vue 2.5.17

2、ElementUI 2.11.1

二、开发需求

1、支持office文档、图片等格式上传；

2、单文件上传大小限制10MB

3、最多上传20个文件

三、问题描述

假设已经上传了文件A，当再上传下一个文件B时，如果文件B不符合需求，比如大小超过10MB，提示上传失败并将文件B从上传队列中删除，但是同时会将已上传成功的上一个文件A也删除。

代码如下：

<el-upload name="uploadFiles" multiple  
 :action="fileUploadAction"  :data="uploadData"  :file-list="fileList" 
 :before-upload="beforeFileUpload" 
 :on-success="fileUploadSuccess"
 :on-remove="fileUploadRemove" 
 accept=".jpg,.jpeg,.png,.gif,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.DOC,.XLS,.PPT,.DOCX,.XLSX,.PPTX">
     <el-button>
         <i class="el-icon-document" />添加附件
     </el-button>
     <span slot="tip" class="el-upload__tip ml-3">
         支持office文档、图片，单文件上传大小限制10MB，最多上传20个附件        
      </span>
</el-upload>

-------------------------------------------------------------------------

// 附件上传前校验
beforeFileUpload (file) {
   const isLenLimit = this.fileList.length < 20;
   const isLt10M = file.size / 1024 / 1024 < 10;
   if (!isLenLimit) {
      this.$message.error('最多只能上传20个附件');
   }
   if (!isLt10M) {
      this.$message.error('请上传体积小于10MB的文件');
   }
   return isLenLimit && isLt10M;
},
// 附件删除
fileUploadRemove (file) {
   this.fileList.splice(this.fileList.findIndex(item => item.url === file.url), 1)
},

四、解决方法

当文件上传失败的时候，会调用before-remove / on-remove钩子。

根据fileUploadRemove方法，file是上传失败的文件B的信息，此时this.fileList（保存上传成功的文件）中并没有保存文件B，因此findIndex会返回-1，导致最后会删除this.fileList数组中的最后一个数据项。

因此，在执行删除操作的时候，需要添加一些判断，确认文件是否需要被删除。

修改后的代码如下：

fileUploadRemove (file) {
   if(file && file.status==="success"){
      this.fileList.splice(this.fileList.findIndex(item => item.url === file.url), 1)
   }
5 }