beforeUpload触发之后,返回false 自动唤起beforeRemove问题
处理方法入下 在beforeRemove里返回false,可以阻断继续触发on-remove钩子
移除之前的钩子函数
beforeRemove(file, fileList) {
if (file && file.status === "success") {
//移除方法
return this.$confirm(`确定移除 ${file.name}?`);
}
return false;
},
element的el-upload文件上传组件,在文件上传失败后,fileList任然展示
如下图
解决方法如下 ①自动提交的处理方法
移除之前的钩子函数
beforeRemove(file, fileList) {
if (file && file.status === "success") {
//移除方法
return this.$confirm(`确定移除 ${file.name}?`);
}
let idx = this.$refs.uploadFile.uploadFiles.findIndex(
(item) => item.uid === file.uid
); // 关键作用代码,去除文件列表失败文件(uploadFiles为el-upload中的ref值)
this.$refs.uploadFile.uploadFiles.splice(idx, 1); // 关键作用代码,去除文件列表失败文件
return false;
},
② 手动提交的处理方法
uploadFile (fileObj) { // 上传
let file = fileObj.file
uploadImageInfo({ file: file, taskId: this.taskId }).then(res => {
if (res.success && res.data) {
// 后端接口返回后逻辑-todo
const obj = {
name: '文件名.pdf', // 文件名带后缀
url: data.path, // 文件路径
}
this.fileList.push(obj) // 显示用的
}
}).catch(err => {
console.log(err)
let uid = file.uid // 关键作用代码,去除文件列表失败文件
let idx = this.$refs.uploadFile.uploadFiles.findIndex(item => item.uid === uid) // 关键作用代码,去除文件列表失败文件(uploadFiles为el-upload中的ref值)
this.$refs.uploadFile.uploadFiles.splice(idx, 1) // 关键作用代码,去除文件列表失败文件
})
}