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