vue项目开发环境下,element-ui框架上传文件组件 el-upload
中的 :on-progress
钩子函数无法触发的原因:
粗略原因:
是由于mokejs
会创建一个新的 XMLHttpRequest 对象,并且有着自己的原始配置,导致覆盖了 axios
的配置(responseType 等) 和 el-upload
组件中创建的 XMLHttpRequst。
详细原因:
在上传文件时要做进度显示需要用到 xhr.upload.onprogress
事件,el-upload
组件中通过 const xhr = new XMLHttpRequest()
创建了一个 XHR
对象, 此时如果你的项目里用到 mockjs
模拟数据的话,mockjs
会重新创建一个 XHR
对象,会覆盖掉el-upload
中创建的XHR
对象, 导致el-upload
组件无法触发 onprogress
事件。