首页 技术设计 前端 vue elementui

# 问题

在 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" /><!--swig0-->
         </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'
})