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

742 阅读1分钟

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 事件。