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

当 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>

封装的上传组件在on-remove是可以返回一个方法和值的,但是这个值是对象,不能返回数组,否则父组件会接收不到,从而导致bug的诞生

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-10 14:10:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-10 14:10:03       100 阅读
  3. 在Django里面运行非项目文件

    2024-04-10 14:10:03       82 阅读
  4. Python语言-面向对象

    2024-04-10 14:10:03       91 阅读

热门阅读

  1. vue qrcode生成二维码

    2024-04-10 14:10:03       41 阅读
  2. C++虚继承

    2024-04-10 14:10:03       38 阅读
  3. 游戏盾如何防护支付平台免受DDOS攻击

    2024-04-10 14:10:03       37 阅读
  4. 【Spring学习笔记】1. Hello Spring

    2024-04-10 14:10:03       28 阅读
  5. 富格林:可信技巧规避虚假风险

    2024-04-10 14:10:03       34 阅读
  6. Python中的抽象基类(ABC)

    2024-04-10 14:10:03       41 阅读
  7. adb remount

    2024-04-10 14:10:03       31 阅读
  8. Qt之线程的使用

    2024-04-10 14:10:03       34 阅读
  9. 【QT教程】QT6国际化

    2024-04-10 14:10:03       29 阅读
  10. 【前端】eslint 禁用命令

    2024-04-10 14:10:03       25 阅读