解决element-ui的upload组件上传文件失败后,仍显示在列表上(成功才显示,失败不显示)
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
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>
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) // 关键作用代码,去除文件列表失败文件
})
}
按照以上代码操作,完美地去掉了失败文件~
总结:翻了官方文档,没有看到处理方法,之所以这么处理,是因为显示的fileList列表并不是我赋值数据需要显示的列表。
正好遇到此问题,整理出来解决方法,希望能帮到需要的人,谢谢~
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)