el-upload 上传重复文件时，会触发remove误删已有同名文件

问题

在el-upload上传重复文件时，通过before-upload方法过滤后，return false时，会触发remove 事件。然而，我们的remove方法中存在删除接口，会把原来的重名文件通过接口删除，刷新后界面后，会发现原来的文件丢失。

代码如下：

 <el-upload
     v-show="!row.rowspan"
     ref="upload"
     multiple
     :show-file-list="true"
     action="#"
     :on-change="onChange"
     :http-request="httpRequest"
     :file-list="row.fileList"
     :on-preview="onPreview"
     :on-remove="onRemove"
     :on-success="onUploadSuccess"
     :on-error="onUploadError"
     :before-upload="beforeUpload"
     :disabled="rowDisable(row)"
     >
         <el-button type="text" :disabled="rowDisable(row)">上传</el-button>
         <div v-if="row.nodeNum === 0" slot="tip" class="el-upload__tip upd--tip">
             <i v-show="updTip" class="el-icon-info" />{{ updTip }}
         </div>
 </el-upload>
 
 <script>
export default {
    methods: {
        beforeUpload(file, fileList) {
          if (file.size / 1024 / 1024 > 50) {
            this.$message.info('不能上传超过50M的文件')
            return false
          }

          const { name } = file
          if (Array.isArray(this.updFileList)) {
            const alreadySameName = this.updFileList.some(item => item.name === name)
            if (alreadySameName) {
              this.$message.warning('上传文件名称重复')
              return false
            }
          }
        },

        // 删除
        onRemove(file) {
          let params = {}
            const { id, url } = file

            if (id && url) {
              params = {
                id,
                url
              }
            } else {
              const result = this.updFileList.filter(item => item.name === file.name)
              if (Array.isArray(result) && result.length > 0) {
                params = {
                  id: result[0].id,
                  url: result[0].url
                }
              }
            }
            api.deleteFile(params).then(res => {
              if (res.code == 200) {
                this.updFileList = this.updFileList.filter(item => params.id !== item.id)
              }
            })
        },
    }
}
    
 </script>

解决办法

1.删除前，加上状态校验

if (file && file.status === 'success') 

完整代码如下：

    // 删除
    onRemove(file) {
      /** 加上状态验证 */
      if (file && file.status === 'success') {
        let params = {}
        const { id, url } = file

        if (id && url) {
          params = {
            id,
            url
          }
        } else {
          const result = this.updFileList.filter(item => item.name === file.name)
          if (Array.isArray(result) && result.length > 0) {
            params = {
              id: result[0].id,
              url: result[0].url
            }
          }
        }
        api.deleteFile(params).then(res => {
          if (res.code == 200) {
            this.updFileList = this.updFileList.filter(item => params.id !== item.id)
          }
        })
      }
    },

2.及时更新文件状态

上述方法虽然可以解决重复文件上传防误删问题，但是对于刚刚上传的文件，file.status为ready状态，然后点击删除文件，ready状态是无法通过remove方法调用删除接口的。

解决方法是上传成功时，统一将文件状态改为success状态

this.$refs.upload.uploadFiles.forEach(file => {
    file.status = 'success'
})