el-upload删除上传的文件: error in v-on handler TypeError: reqs[uid].abort is not a function

问题:

使用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()
},