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