vue3 上传组件判断文件名是否已存在，before-upload返回false自动调用before-remove on-remove钩子问题解决方法

本文链接：https://blog.csdn.net/qq_43195831/article/details/137563904

当 before-upload 返回false时 ,会自动调用 before-remove on-remove钩子
按步骤一步一步来（附上我自己的代码）
在文件上传之前就判断当前文件是否已存在
先定义判断文件名是否存在的方法

 function isFilenameExist(filename) {
    return fileList.value.filter(e => e.name === filename).length > 0
  }

 function handleBeforeUpload(file) {
    if (isFilenameExist(file.name)) {
      proxy.$modal.msgError(`${ file.name } 已存在`);   //此处可换成ElMessage.error('文件已存在')
      return false;
    }
}

当我们上传已经传过的文件时，以上判断就会生效，就会最直接调用on-remove方法了，并且之前的相同文件就会被删除，那么我们就要阻止删除已上传的文件，删除当前上传的这个文件，这时就需要在on–remove里加上一个判断，当上传的状态不是 success 时就返回true（同意删除当前上传未成功的文件）

补充一下：文件状态有三种 : 未上传的是 ready, 上传成功是 success, 失败时 fail

 function handleRemove(file, files) {
    // console.log(file)
    // console.log(files)
    if (file.status !== 'success') {
      return true
    }
    emit('update:delFile', file);
  }

这样子就解决了，不是问题的问题，不是bug的bug

备注一下：上传组件的插槽 file 用法说明，file返回的事一个数组，直接循环就行了

 <template #file>
   <div class="fileList"v-for="(item,index) in file">
     <span>{{ item.name||item.fileName }}</span>
     <el-icon size="16px">
       <Delete/>
     </el-icon>
   </div>
 </template>