当 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的诞生