vue element-ui 上传文件的 :on-progress钩子无法触发的原因及报错原因

上传文件的 :on-progress钩子无法触发的原因及报错原因
  是由于mockjs会创建一个新的XMLHttpRequest对象,并且有着自己的原始配置。所以导致覆盖了axios的配置(responseType等)和el-upload组建中创建的XMLHttpRequest。
(  在上传文件时要做进度显示需要用到xhr.upload.onprogress事件,此时如果你的项目里用到mock.js模拟数据的话则无法触发onprogress事件
el-upload的源码中 const xhr = new XMLHttpRequest() 而mockjs会重新声明一个XMLHttpRequest导致el-upload的progress失效)
  这时候只要我们保证后台接口都调试完成的状态下
  :on-progress=“onProgress"
//进度条
onProgress(e, file, v) {
    Debugger
    let that = this;
    let endPro = 95; 
    that.loading = true;
    that.interval = setInterval(function () {
        if (that.percentage < endPro) {
            that.percentage++;
        }
    },500)
},
解决方法:把引用 import ‘@/mock’ 注释掉就可以,相关的接口数据注意
// import '@/mock' // simulation data
posted @ 2020-04-05 22:42  嘉煠  阅读(11407)  评论(0编辑  收藏  举报