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

简介: 今天和大家分享一个报错的解决方案背景项目打包部署到宝塔上后,打开网页,上传东西时出现了一个报错,但是在本地开发环境是没有问题的。

今天和大家分享一个报错的解决方案

背景

项目打包部署到宝塔上后,打开网页,上传东西时出现了一个报错,但是在本地开发环境是没有问题的。

报错内容:

5a2ae5d0e3cc42218014e1a232cca1d0.png

这个问题是因为mockjs改动了axios里面XMLHttpRequest对象从而导致报错。

解决方案:

方案一:

查找文件node_modules/mockjs/dist/mock.js

找到后打开文件大约在8312行的位置添加以下代码

MockXMLHttpRequest.prototype.upload = xhr.upload;

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

9914446bf0c340fea0f144c45a4bbe26.png

方案二:

同时在node_modules/mockjs/src/xhr/xhr.js 文件的第216行和node_modules/mockjs/dist/mock.js文件的大约8312行处添加以下代码

MockXMLHttpRequest.prototype.upload = xhr.upload;

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

方案三:

卸载mockjs,并删除相关代码

npm uninstall mockjs

vue.config.js

46dbca6c5dba4a88bf057c8a3bbcca72.png

注释这段代码

src/main.js

24eeb6b0edc74e1faa685f34a811ea4a.png

注释这段代码

以上就是 t.upload.addEventListener is not a function的三种解决方案,感谢您的观看,希望我的这篇文章能够帮助到您。

相关文章
|
8月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
718 2
|
9月前
|
API C++
【Azure 环境】VS Code登录China Azure(Function)报错 An error occurred while signing in: invalid_request - AADSTS65002
An error occurred while signing in: invalid_request - AADSTS65002: Consent between first party application 'c27c220f-ce2f-4904-927d-333864217eeb' and first party resource '797f4846-ba00-4fd7-ba43-dac1f8f63013' must be configured via preauthorization - applications owned and operated by Microsoft mus
446 13
|
9月前
|
缓存 开发工具 C++
VS Code调试Function报错|无法加载Diagnostics.Abstractions怎么办?
在调试 Azure Function 时,可能出现 “Could not load file or assembly 'Microsoft.Extensions.Diagnostics.Abstractions, Version=8.0.0.0'” 错误,导致主机启动失败。本文详细解析该依赖加载错误的成因,并提供基于不同安装方式(NPM 或 MSI)的解决方案,涵盖重装 Core Tools、清理缓存、检查 .NET SDK 版本等操作步骤,同时提供日志排查与 Docker 容器化替代方案,帮助开发者快速恢复本地调试流程。
367 0
|
11月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
1151 0
|
11月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
10月前
|
网络协议 API 网络安全
【Azure Function App】发现部分请求Function App遇见 403.72 报错(请求Body>100KB)
在调用Azure Function的HTTP Trigger时,发送POST请求偶尔出现403错误,且响应为空、Header信息少。经排查发现,当请求Body大于100KB时会触发403.72错误,原因是启用了“Client Certificate mode”为“Optional Interactive User”。解决方法是将该模式设置为“Ignore”。由于TLS重新协商机制限制,大请求体无法正常处理,导致此问题。
296 1
|
11月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
758 1
|
人工智能 Python
083_类_对象_成员方法_method_函数_function_isinstance
本内容主要讲解Python中的数据类型与面向对象基础。回顾了变量类型(如字符串`str`和整型`int`)及其相互转换,探讨了加法在不同类型中的表现。通过超市商品分类比喻,引出“类型”概念,并深入解析类(class)与对象(object)的关系,例如具体橘子是橘子类的实例。还介绍了`isinstance`函数判断类型、`type`与`help`探索类型属性,以及`str`和`int`的不同方法。最终总结类是抽象类型,对象是其实例,不同类型的对象有独特运算和方法,为后续学习埋下伏笔。
273 7
083_类_对象_成员方法_method_函数_function_isinstance
|
Python
[oeasy]python086方法_method_函数_function_区别
本文详细解析了Python中方法(method)与函数(function)的区别。通过回顾列表操作如`append`,以及随机模块的使用,介绍了方法作为类的成员需要通过实例调用的特点。对比内建函数如`print`和`input`,它们无需对象即可直接调用。总结指出方法需基于对象调用且包含`self`参数,而函数独立存在无需`self`。最后提供了学习资源链接,方便进一步探索。
324 17

热门文章

最新文章