vue项目使用elementui上传组件 打包后报错t.upload.addEventListener is not a function的解决方案

最新推荐文章于 2024-08-02 11:11:46 发布
最新推荐文章于 2024-08-02 11:11:46 发布
阅读量2.6k 收藏 5
点赞数 2
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_44146522/article/details/130206296
版权
当MockJS改动axios的XMLHttpRequest对象时，会导致xhr.upload.addEventListener报错。这个问题是由于MockXMLHttpRequest对象缺少upload属性。解决方案包括在MockJS源码中为MockXMLHttpRequest对象添加xhr.upload属性，或者在xhr.js中做相应修改并重新编译。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

错误问题

Vue:xhr.upload.addEventListener is not a function

这个问题是因为mockjs改动了axios里面XMLHttpRequest对象致使的

根据axios源码 l是一个XMLHttpRequest对象

mockJs把l变量从XMLHttpRequest对象改为了MockXMLHttpRequest对象

因此l.upload是一个空对象 空对象没有 addEventListener方法 因此报错

解决方案：

方法1:

在工程node_modules/mockjs/dist/mock.js文件里，在mockjs判断的条件的地方 （搜寻）->/若是未找到匹配的数据模板，则 采用原生 XHR 发送请求。/ 通常是8308行位置，添加代码

MockXMLHttpRequest.prototype.upload = xhr.upload;

 给MockXMLHttpRequest对象添加一个原生xhr.upload方法。

 

方法2:

在工程node_modules/mockjs/src/xhr/xhr.jsprototype 通常是第216行添加代码

MockXMLHttpRequest.prototype.upload = xhr.upload;

这个方法要重新编译才能够生效对象

vue3 - element-plus报错TypeError:t.upload.addEventListener is not a function，vue+element组件库控制台报错详细解决教程
高级前端工程师
07-09 1万+
vue3，nuxt3，element-Plus，upload，上传组件，上传文件报错，本地开发没问题，部署打包上线就会报错，这个问题如何解决，还是一直报错，el-upload上传报错，vue3项目使用element上传组件 打包后报错t.upload.addEventListener is not a function的解决方案，VUE3上传功能本地上传正常，打包上传后报错，打包后报错t.upload.addEv，vue3项目使用elementui-plus上传组件 打包后报错t.upload.addEve
VUE3上传功能本地上传正常，打包上传后报错TypeError: ***.upload.addEventListener is not a function和文件上传请求地址
liuzaixi的博客
03-04 1415
/这样就拿到了参数中的数据。//获取#/之前的字符串。一、erer这个错误很可能是因为在打包后，文件的路径或者名称发生了变化，导致代码中的某些方法无法正确找到。二、使用element-plus文件上传时，后端使用的时代理路径导致上传的url需要前端自己处理。1、文件node_modules/mockjs/dist/mock.js。
VUE上传功能本地上传正常，打包上传后报错TypeError: ***.upload.addEventListener is not a function
dxn16638400024的博客
07-28 1068
尝试使用 Vue CLI 提供的打包分析工具，查看哪些文件被打包进了你的代码中，是否有可能因为某些文件没有被正确打包导致了问题。2.文件node_modules/mockjs/src/mock/xhr/xhr.js 第216行。这个错误很可能是因为在打包后，文件的路径或者名称发生了变化，导致代码中的某些方法无法正确找到。确认你的上传代码是否与打包后的代码在同一目录下或同一级目录下，否则需要修改引用路径。确认你的上传代码路径是否正确，是否有被正确引入。
addEventListener is not a function
热门推荐
Yanfengting的博客
12-14 1万+
addEventListener is not a function 这是因为选择器没有正确选择元素对象 document.getElementsByClassName(…)捕捉到的是该类名元素的数组 正确的访问方式应该是： document.getElementsByClassName(…)[0].addEventListener… 参考：https://blog.csdn.net/jzsn_...
upload.addEventListener is not a function报错
weixin_43784243的博客
08-02 1136
upload.addEventListener is not a function
vue打包报错elementui上传组件 打包后报错t.upload.addEventListener is not a function
ddf__的博客
12-30 413
在node_modules/mockjs/dist/mock.js文件的大约8312行添加。同时修改node_modules/mockjs/src/xhr/xhr.js 第216行。打包上传出现了这个错误。
el.addEventListener is not a function
最新发布
02-20
当遇到 `el.addEventListener is not a function` 错误时，通常意味着尝试调用此方法的对象不是一个有效的DOM元素。具体原因可能涉及框架特定的行为或是第三方库的干扰。 #### UniApp中的解决方案 对于UniApp环境...
vue项目 利用elementui 上传视频获取视频的宽高大小等信息
TVM的博客
12-01 5272
1.饿了么的上传组件 <el-upload>,监听他的变化on-change <el-upload :on-change="uploadVideoChange" > <el-button size="small" type="primary"> <i class="el-icon-upload" /&...
VUE：vue3.x自定义上传文件的组件
干饭搬砖两不误。
07-29 1544
当ui框架的上传组件不能满足我们的使用需求，就需要自定义一个上传的组件
vue项目使用elementui上传组件 打包后报错t.upload.addEventListener is not a function
苦夏木禾
10-27 1336
vue项目使用elementui上传组件 打包后报错t.upload.addEventListener is not a function
Vue上传功能:****.upload.addEventListener is not a function
G佳伟
10-21 5435
VUE上传功能本地上传正常，打包上传nginx后报错TypeError: ***.upload.addEventListener is not a function。
vue3项目使用elementui-plus上传组件 打包后报错t.upload.addEventListener is not a function
weixin_49562833的博客
02-20 1473
vue3项目使用elementui-plus上传组件 打包后报错t.upload.addEventListener is not a function
o.upload.addEventListener is not a function
一位前行者的博客
06-17 487
在 node_modules/mockjs/dist/mock.js 第8308行 和 node_modules/mockjs/src/xhr/xhr.js 第216行。这样是可以解决，不过这不是根本方法，我们的项目上测试和线上是自动打包上传的，所以不会把这两句代码打包进去，所以用了第二种方法。二、原因是vue-cli中的mockjs模块把XMLHttpRequest覆盖拦截了，会导致对象属性访问不到。在本地的开发环境是可以正常上传的，但是到测试环境，上传就报了这么一个错。
vue项目使用element-ui组件上传文件报错upload.addEventListener is not a function Mock数据报错的解决方案
qq_53979100的博客
04-04 2313
需要查找文件node_modules/mockjs/dist/mock.js以及node_modules/mockjs/src/mock/xhr/xhr.js。主要是因为mockjs改动了axios里面XMLHttpRequest对象从而导致报错。就是给MockXMLHttpRequest对象添加一个原生xhr.upload方法。找到后打开文件大约在8312行和216行的位置添加以下代码。
upload.addEventListener is not a function
隶属感的博客
09-18 337
测试没问题 一打包发布就不行。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值