头像上传组件的上传进度条

[hollyDysania]

看到vue-image-crop-upload的源码是原生写的发送请求，并且在创建XMLHttpRequest后监听了进度条变化的事件
vue-element-admin中是用axios发送的请求，过程中没有用到进度条的事件，所以最后的效果是进度条没有变化
我copy了贵项目的上传组件，然后在axios的参数onUploadProgress中监听了进度条事件，最终效果可行。
但是在vue-element-admin中onUploadProgress这个参数却报错，不知道为什么

[PanJiaChen]

#445

[keyiwu]

最后的解决方案是什么呢

[hollyDysania]

@keyiwu
我后来这样写的 onUploadProgress中监听progress事件

 // 监听进度回调
      const uploadProgress = function(event) {
        if (event.lengthComputable) {
          that.progress = (100 * Math.round(event.loaded)) / event.total
        }
      }
      // 上传文件
      that.reset()
      that.loading = 1
      that.setStep(3)
      request({
        url,
        method: 'post',
        onUploadProgress: function(progressEvent) {
          //上传进度的事件
          window.addEventListener(
            'progress',
            uploadProgress(progressEvent),
            false
          )
        },
        data: fmData
      }).then....

[keyiwu]

你这只能够写法是去除mockjs的吧，如果不去除，会出现一个错误，request.js:59 errTypeError: request.upload.addEventListener is not a function

[PanJiaChen]

4.0版本使用mock-server了，已经不会有这种问题了。