本文主要是介绍解决上传文件报错request.upload.addEventListener，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
目录
一、前言
二、问题
2.1 问题描述
三、解决
2.1 卸载mockjs
2.2 将mockjs改为动态引入
一、前言
可被mockJs坑了一把....
二、问题
在调试项目的时候突然间提示 request.upload.addEventListener ，仔细一看发现是上传接口时报的，这就使得我有点摸不着头脑了...
2.1 问题描述
今天在调用接口上传文件的时候意外的报错了 request.upload.addEventListener ，代码中是这么写的
export function xxx(data, file) {return request({url: 'xxx',method: 'post',data,headers: {'Content-Type': 'multipart/form-data'},onUploadProgress(e) {if (e.lengthComputable) {let rate = Math.floor(Number(e.loaded / e.total) * 100);file.fPercent = rate;}}});
}定位之后发现是 onUploadProgress 这一个方法的问题，可是这个方法不是axios自带的吗？
三、解决
结果定位，发现是mockJs的 onUploadProgress 覆盖掉了axios的 onUploadProgress ，所以导致在调试的时候出现了这个错，知道了原因那就好办了，大致方法如下：
2.1 卸载mockjs
直接明了的办法，直接卸载掉，不装了总可以吧
npm uninstall mockjs就我个人而言，虽然项目配置了mockjs，但真的很少用到，即使是真的需要mock数据也是写死一些json格式的本地请求一下就好了，而不是去调用mockjs来模拟请求....
因此，是否卸载其实真的可以仔细考虑一下！
2.2 将mockjs改为动态引入
如果不卸载，那么能否改成动态配置呢？肯定是可以的，
先说一下正常情况下的引入，以Vue为例，正常情况下mockjs的引入是在main.js中直接如下这种：
import Mock form "mockjs";因此，如果要修改我们就不能直接在main.js中引入：
1. 首先新建一个文件夹mock，在里面新建类似于index.js中引入mockjs以及对其进行相关配置设置；
2. 在vue.config.js中进行配置，是否动态加载
module.exports = {publicPath: Setting.publicPath,outputDir: Setting.outputDir,assetsDir: Setting.assetsDir,runtimeCompiler: true,productionSourceMap: false,devServer: {},lintOnSave: false,css: {loaderOptions: {less: {javascriptEnabled: true}}},chainWebpack: config => {// 判断是否需要加入模拟数据const entry = config.entry('app');if (Setting.isMock) {entry.add('@/mock').end()}}
};通过在setting中设置isMock属性的值，来判断是否需要给当前项目加载mock，比如可以在isMock中判断是否是development环境等等...
这篇关于解决上传文件报错request.upload.addEventListener的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
