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
多多关照,多多指教,共同成长
---嘉煠