AntD自定义上传踩坑

因为业务需要已经一些限制不能使用AntD原生的上传，需要自定义上传实现！

其实我在这之前一直没有去实现过自定义上传，只知道有这个方法存在。这次对我来说其实就是摸着石头过河，所以我会从一个小白的角度来讲一下我的经历。先声明我这里是需要上传图片，并且需要照片墙预览。

首先就是第一点怎么获取到后端所需要的文件流。这里我使用了FormData对象

const formData = new FormData()
formData.append('file', option.file)
 

如果构造FormData对象是传入表单js对象，formData会自动注入表单里的值；如果是new一个空对象，然后手动append的表单类型为file时要注意：这里append进去的是File对象，而不是FileList对象。更多FormData相关的自行百度谷歌。

然后就是第二点，记得改变文件状态

//调用上传方法
Upload(formData)
  .then(res => {
     if (res.code === 200) {
        //改变文件上传状态
       this.fileList[this.fileList.length - 1].status = 'done'
       this.$notification.success({
          message: 'Upload Success',
          description: 'Upload Success'
        })
       } else {
        this.fileList[this.fileList.length - 1].ststus = 'error'
        this.$notification.error({
           message: 'Upload Error',
           description: 'Upload Error'
          })
        }
      })

最后是我觉得最坑的地方，也就是第三点删除报错：TypeError: reqs[uid].abort is not a function

造成这个的原因是：promise没有abort方法，只有原生js的XMLHttpRequest对象才有abort。所以一般会导致移除自定义上传文件时会报reqs[uid].abort is not a function这样一个错误。

处理这个的核心思想也非常简单，给promise强行写入abort（PS:为此我头疼了两小时）

const prom = new Promise((resolve, reject) => {})
prom.abort = () => {}
return prom

看了很多大神们写的相关博客，就说了写这个就ok了，但是我直接加这么一段，删除的时候报错还是一样的。

但是思路肯定就是这么一个思路，有问题肯定是我没有写对地方。

然后我认真研读了这篇文章：https://blog.csdn.net/qq_19694913/article/details/81208049

虽然讲的是element-ui,但是大家都知道前端框架大同小异。我想应该是我没有把回调方法写出来。当然最后问题得到了解决。

最后的最好放上自定义上传方法的源代码

async customRequest (option) {
      const that = this
      const { onProgress, onSuccess, onError } = option
      const formData = new FormData()
      formData.append('file', option.file)
      await mmsUpload(formData, onProgress)
        .then(res => {
          if (res.code === 200) {
            that.fileList[that.fileList.length - 1].status = 'done'

            this.$notification.success({
              message: 'Upload Success',
              description: 'Upload Success'
            })
            onSuccess()
          } else {
            that.fileList[that.fileList.length - 1].ststus = 'error'
            this.$notification.error({
              message: 'error Success',
              description: 'error Success'
            })
            onError()
          }
        })
      const prom = new Promise((resolve, reject) => {})
      prom.abort = () => {}
      return prom
    }

希望能帮到看到这篇文章的你们，共勉