问题:
使用elementui的el_upload组件上传文件,但是点击叉号上传的文件无法删除。报错如下:
分析:
查看源码的时候会发现http-request
这个传入的回调函数返回一个Promise
。
const req = this.httpRequest(options);
this.reqs[uid] = req;
if (req && req.then) {
req.then(options.onSuccess, options.onError);
}
因为promise没有abort方法,只有原生js的XMLHttpRequest对象才有abort。所以一般会导致自定义上传文件时会报reqs[uid].abort is not a function
这样一个错误。
解决方法:
在http-request函数中写上如下代码就不会再报上述错误。:
const prom = new Promise((resolve, reject) => {})
prom.abort = () => {}
return prom
仅有上面几句只解决了报错问题,应该还不能成功删除。删除需要在删除文件之前的钩子before-remove
中清除文件列表,如下:
做了如上处理后就可以成功删除上传的文件。
handleMusic(params) {
var reader = new FileReader()
reader.readAsDataURL(params.file)
reader.onload = (e) => {
this.music.file = e.target.result
this.music.name = params.file.name
this.$forceUpdate()
}
const prom = new Promise((resolve, reject) => {})
prom.abort = () => {}
return prom
// return true
},
handleRemove(file) {
this.$refs.upload.clearFiles()
},