Vue上传功能:****.upload.addEventListener is not a function

最新推荐文章于 2024-08-02 11:11:46 发布
最新推荐文章于 2024-08-02 11:11:46 发布
阅读量4.3k 收藏 13
点赞数 1
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gjwgjw1111/article/details/127448624
版权
在将Vue应用打包部署到nginx后，遇到上传功能报错TypeError:***.upload.addEventListenerisnotafunction。问题源于MockJS对XMLHttpRequest的拦截。解决方案包括：一是在mock.js和xhr.js中添加代码修复；二是卸载并删除MockJS以避免对象属性访问错误。通过这两种方法可以解决部署后上传功能的异常问题。
摘要由CSDN通过智能技术生成

VUE上传功能本地上传正常，打包上传nginx后报错TypeError: ***.upload.addEventListener is not a function

在这里插入图片描述

解决方法

方法一：

查找两个文件添加如下代码：

 MockXMLHttpRequest.prototype.upload = xhr.upload;

文件node_modules/mockjs/dist/mock.js 第8308行
在这里插入图片描述

文件node_modules/mockjs/src/mock/xhr/xhr.js 第216行
在这里插入图片描述
方法二：
vue-cli中的mockjs模块把XMLHttpRequest覆盖拦截了，会导致对象属性访问不到，所以把mokejs卸载删除。

删除mokejs：

npm uninstall mockjs

删除\注释引入mock
在这里插入图片描述
在这里插入图片描述

G佳伟
关注
专栏目录
vue3 - element-plus报错TypeError:t.upload.addEventListener is not a function，vue+element组件库控制台报错详细解决教程
高级前端工程师
07-09 2135
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
vue中用H5实现文件上传的方法实例代码
08-30
Vue 中使用 H5 实现文件上传的方法实例代码 Vue 中使用 H5 实现文件上传的方法实例代码是一个非常实用的技术，特别是在移动端应用中。今天，我们将详细介绍如何使用 Vue 实现文件上传的方法实例代码。 首先，让...
VUE上传功能本地上传正常，打包上传后报错TypeError: ***.upload.addEventListener is not a function
aijisen的博客
04-07 446
尝试使用 Vue CLI 提供的打包分析工具，查看哪些文件被打包进了你的代码中，是否有可能因为某些文件没有被正确打包导致了问题。这个错误很可能是因为在打包后，文件的路径或者名称发生了变化，导致代码中的某些方法无法正确找到。检查你代码中使用的是 addEventListener 方法，而不是其他方法来绑定上传事件。确认你的上传代码是否与打包后的代码在同一目录下或同一级目录下，否则需要修改引用路径。确认你的上传代码路径是否正确，是否有被正确引入。
upload.addEventListener is not a function报错
最新发布
weixin_43784243的博客
08-02 370
upload.addEventListener is not a function
Axios + mockjs: request.upload.addEventListener is not a function 的原因和解决办法
O_o
03-08 4951
导致这一问题的根本原因是 Mockjs 中, 封装了原生的 XMLHttpRequest 为 MockXMLHttpRequest. 解决思路是, 把原生 XMLHttpRequest 的 upload 属性赋给 MockXMLHttpRequest 的原型对象.在 node_modules/mockjs/dist/mock.js 加入以下代码: 这样在开发环境是没问题了. 对于生产环境的处理 ...
【Vue】UI组件上传图片，爆 xhr.upload.addEventListener is not a function 错误
m0_62811051的博客
12-09 2520
这个问题主要是因为我在写后台管理的时候使用mockjs，但是之后还要用它模拟数据，不可能将其卸掉，那么就在node_modules文件里面下手。然后找到 node_modules/mockjs/src/xhr/xhr.js （上面图示的第二个文件）的第 216 行再次加入上面那行代码。
老项目使用axios的监听文件上传进度出现：request.upload.addEventListener in not a function
ZHU18670324781的博客
06-21 559
在公司老项目中，使用mockjs和axios，mockjs源码将XMLHTTPRequest修改了，导致监听文件上传进度的时候，出现 request.upload.addEventListener in not a function。
request.upload.addEventListener in not a function。
weixin_30654419的博客
03-07 1799
本人在使用vue开发一套后台系统时，碰到了一个上传文件的需求，因为平时做的上传是使用ajax的方式来进行上传。 现在是使用axios来进行上传，方式没有什么改变： npm i axios 直接上 很简单的一个效果。 但是，项目经理要求显示上传文件的进度，这也没什么难得，无非就是多了一步，监听‘progress’，写个效果就OK了。 于是： 一切都如期进行着。 但是当我发送...
vue中利用simplemde实现markdown编辑器（增加图片上传功能）
11-27
本篇文章将详细讲解如何在Vue中利用SimpleMDE实现Markdown编辑器，并添加图片上传功能。 首先，我们需要安装SimpleMDE。在终端中执行以下命令： ```bash npm install simplemde --save ``` 安装完成后，在HTML模板...
使用vue构建一个上传图片表单
08-30
使用 Vue 构建上传图片表单 在本文中，我们将详细介绍如何使用 Vue 构建一个上传图片表单。首先，我们需要了解 Vue 的基本概念和思想。与 jQuery 不同，Vue 是一个数据驱动的框架，我们只需要操作数据，数据变化后...
vue 获取视频时长的实例代码
10-16
在Vue.js应用中，获取视频时长是一项常见的需求，特别是在处理用户上传的视频文件时，可能需要预览视频时长来提供更好的用户体验或进行格式验证。以下是一个关于如何在Vue中获取视频时长的实例代码解析。 首先，...
tinymce 自定义多图片批量上传插件 附使用示范Test
06-22
在官方的默认设置中，TinyMCE仅支持单个图片的上传功能。然而，对于需要处理大量图片的场景，如博客发布、文章编辑等，单个图片上传往往效率较低。为了满足这种需求，开发者们通常会通过自定义插件来扩展TinyMCE的...
vue项目使用elementui上传组件 打包后报错t.upload.addEventListener is not a function的解决方案
qq_44146522的博客
04-17 2284
这个问题是因为mockjs改动了axios里面XMLHttpRequest对象致使的根据axios源码 l是一个XMLHttpRequest对象mockJs把l变量从XMLHttpRequest对象改为了MockXMLHttpRequest对象因此l.upload是一个空对象 空对象没有 addEventListener方法 因此报错。
vue项目使用element-ui组件上传文件报错upload.addEventListener is not a function Mock数据报错的解决方案
qq_53979100的博客
04-04 1925
需要查找文件node_modules/mockjs/dist/mock.js以及node_modules/mockjs/src/mock/xhr/xhr.js。主要是因为mockjs改动了axios里面XMLHttpRequest对象从而导致报错。就是给MockXMLHttpRequest对象添加一个原生xhr.upload方法。找到后打开文件大约在8312行和216行的位置添加以下代码。
实现文件上传进度条及解决request.upload.addEventListener in not a function问题
总结，交流，记录，成长
09-30 8168
使用axios上传文件时需要进度条，可通过监听axios的onUploadProgress获取当前文件上传进度，进度条可以用antd的Progress 实现过程中出现问题request.upload.addEventListener in not a function。 参考南柯一梦的博客https://www.cnblogs.com/leeke98/p/10491358.html 原来和mock...
vue axios 上传文件 xhr.addEventListener is not a function(…) 问题修复 不用卸载 mockjs
weixin_42489414的博客
09-17 582
vue 上传文件无法显示实时进度bug解决(vue + mockjs + axios)
VUE3上传功能本地上传正常，打包上传后报错TypeError: ***.upload.addEventListener is not a function和文件上传请求地址
liuzaixi的博客
03-04 1097
/这样就拿到了参数中的数据。//获取#/之前的字符串。一、erer这个错误很可能是因为在打包后，文件的路径或者名称发生了变化，导致代码中的某些方法无法正确找到。二、使用element-plus文件上传时，后端使用的时代理路径导致上传的url需要前端自己处理。1、文件node_modules/mockjs/dist/mock.js。
Uncaught (in promise) TypeError: o.upload.addEventListener is not a function
07-27
这个错误提示说明在一个 Promise 中发生了一个类型错误。具体地说，`o.upload.addEventListener` 不是一个函数。 通常，这种错误发生在尝试在一个非 `XMLHttpRequest` 对象上使用 `addEventListener` 方法时。请确保 `o.upload` 是一个有效的 `XMLHttpRequest` 对象，并且确保在调用 `addEventListener` 方法之前，它已经正确地被创建和初始化。 如果你能提供更多的上下文或代码片段，我可以给出更具体的解决方案。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

G佳伟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值