element-UI上传组件-js删除上传失败的文件列表
el-upload 上传失败后,文件仍显示在列表上,这个失败定义是指文件解析出错,并非组件和网络问题
这个pdf文件上传失败,仍显示在列表,给人错觉是上传成功的,所以,我们把它去掉~,下面上代码:
<el-upload class="upload-file padding" ref="uploadFile" multiple accept="image/jpeg,image/png,image/gif,application/pdf" :http-request="uploadFile" :on-change="onChange" :before-upload="beforeuploadFile" action="123" :disabled="!isDisabled" :on-remove="handleRemove" :file-list="ruleForm.commission"> <el-button type="primary" size="mini" :loading="uploadLoding" :disabled="!isDisabled">上传</el-button> <div slot="tip" class="el-upload__tip" style="line-height: 1; margin: 0 0 10px;">注:只能上传图片或pdf文件</div> </el-upload> <script> //移除文件 handleRemove (file, fileList) { this.ruleForm.commission = fileList // this.ruleForm.fileName = '' // 用于校验 }, //上传文件变化时的钩子,这里需要注意的是上传过程中文件变化状态有好几种,都会触发这个函数 onChange (file, fileList) { this.files = fileList }, // 手动定义上传上传 uploadFile (fileObj) { let file = fileObj.file uploadImageInfo({ file: file, width: 165, height: 245, caseId: this.caseId, taskId: this.taskId }).then(res => { if (res.success && res.data) { // 后端接口返回后逻辑-todo const obj = { name: '文件名.pdf', // 文件名带后缀 url: data.path, // 文件路径 } this.ruleForm.commission.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) // 关键作用代码,去除文件列表失败文件 }) } </script>复制代码
按照以上代码操作,完美地去掉了失败文件,最关键的一句代码:
this.$refs.uploadFile.uploadFiles.splice(idx, 1)
总结:翻了官方文档,没有看到处理方法,之所以这么处理,是因为显示的fileList列表并不是我赋值数据需要显示的列表
补充知识点:
element上传change事件官方的PAI文档
文档中也清新的说明了change事件被触发的三种状态,添加文件,上传成功,上传失败都会被触发,
handleUploadChange: function(info) { const file = info.file; if (file.status === 'uploading') { console.log('正在上传文件', info); } else if (file.status === 'error') { this.$notification.error({ message: '上传文件出错', description: JSON.stringify(info) }); } else if (file.status === 'done') { console.log('上传完成', info); //如果倒入数据的话file.response可以在做进一步数据判断处理 const response = file.response; if (response.success) { if (response.data.status == 1) { console.log('倒入成功'); }else if (response.data.status == 2) { console.log('倒入完成'); }else{ console.log('倒入失败'); } } else { this.$notification.error({ message: '上传失败', description: response.msg }); }
作者:掘黄金的打工人
链接:https://juejin.cn/post/7025857723086405640