element-UI中上传图片前控制大小尺寸，不符合条件时不多删fileList

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

     
         添加附件
     
     
         支持office文档、图片，单文件上传大小限制10MB，最多上传20个附件
      


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

// 附件上传前校验
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)
    }
 }

---

成品：