【Vue】UI组件上传图片，爆 xhr.upload.addEventListener is not a function 错误

已于 2022-12-09 09:46:59 修改
阅读量2.3k 收藏 10
点赞数 2
分类专栏： 项目常遇错误 前端 文章标签： vue.js javascript ecmascript
于 2022-12-09 00:11:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62811051/article/details/128245784
版权

这个问题主要是因为我在写后台管理的时候使用mock.js，它改变了 XhrRequest 对象的名称，改成 了MockXhrRequest 所以才会报以上的错误但是之后还要用它模拟数据，不可能将其卸掉，那么就在 node_modules 文件里面下手。解决步骤如下：

首先找到 node_modules/mockjs/dist/mock.js （下面图示的第一个文件）中的第8312行，加入如下代码：

MockXMLHttpRequest.prototype.upload = xhr.upload;

图示加入一下！

 

 然后找到 node_modules/mockjs/src/mock/xhr/xhr.js  （上面图示的第二个文件）的第 216 行再次加入上面那行代码。

 然后就解决啦！

小花睡不醒
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
vue3 - element-plus报错TypeError:t.upload.addEventListener is not a function，vue+element组件库控制台报错详细解决教程
高级前端工程师
07-09 1878
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 axios 上传文件 xhr.addEventListener is not a function(…) 问题修复 不用卸载 mockjs
weixin_42489414的博客
09-17 541
vue 上传文件无法显示实时进度bug解决(vue + mockjs + axios)
关于addEventListener的使用和注意项
yiguoxiaohai的博客
06-19 602
关于addEventListener的使用和注意项
vue项目使用element-ui组件上传文件报错upload.addEventListener is not a function Mock数据报错的解决方案
qq_53979100的博客
04-04 1797
需要查找文件node_modules/mockjs/dist/mock.js以及node_modules/mockjs/src/mock/xhr/xhr.js。主要是因为mockjs改动了axios里面XMLHttpRequest对象从而导致报错。就是给MockXMLHttpRequest对象添加一个原生xhr.upload方法。找到后打开文件大约在8312行和216行的位置添加以下代码。
vue项目使用elementui上传组件 打包后报错t.upload.addEventListener is not a function
苦夏木禾
10-27 1180
vue项目使用elementui上传组件 打包后报错t.upload.addEventListener is not a function
vue项目使用elementui上传组件 打包后报错t.upload.addEventListener is not a function的解决方案
SqlloveSyn的博客
12-01 1897
今天和大家分享一个报错的解决方案。
vue项目使用element-ui组件上传文件报错 上传报错upload.addEventListener is not a function Mock数据报错
懮俍的博客
09-07 1040
【代码】vue项目使用element-ui组件上传文件报错 上传报错upload.addEventListener is not a function Mock数据报错。
upload.addEventListener is not a function报错
q1463944989的博客
07-12 1472
upload.addEventListener is not a function解决办法
Vue + Element-ui组件上传图片报错问题解决方案
TianXuab的博客
07-28 1624
总结起来，MockXMLHttpRequest对象的upload属性是一个非常有用的功能，它可以帮助我们模拟上传文件的过程，并对上传的进度进行监控。通过将xhr.upload属性赋值给MockXMLHttpRequest对象的upload属性，我们可以在模拟网络请求时使用upload属性来监控上传的进度。假设我们正在开发一个上传图片的功能，我们可以使用MockXMLHttpRequest对象来模拟上传图片的过程，并对上传的进度进行监控。在模拟上传的过程中，我们可以使用upload属性来监控上传的进度。
vue+element-ui实现富文本(含有图片粘贴拖拽上传)
over110522的博客
09-24 3473
vue+element-ui实现富文本(含有图片粘贴拖拽上传) Just For Share | 仅仅分享 首先需要安装 cnpm i vue-quill-editor -D 富文本编辑器 cnpm install quill-image-resize-module --save 照片缩小放大 cnpm install --save quill-image-drop-module 照片拖拽 cnpm install --save quill-image-paste-module 照片拖
详解Vue.js搭建路由报错 router.map is not a function
10-19
然而，有时候在搭建Vue Router时可能会遇到"router.map is not a function"这样的错误，这通常是由于版本不兼容或者使用方法不当导致的。 **错误分析：** 在Vue Router的早期版本（例如1.0.x）中，`router.map`是...
Vue 报错TypeError: this.$set is not a function 的解决方法
12-12
报错场景：将APi中得到的response数据，用Vue$set()使数据动态响应 报错代码： methods: { textTranslate: function (text, to) { $.ajax({ url: 'http://openapi.youdao.com/api', type: 'post', dataType: ...
vuex 解决报错this.$store.commit is not a function的方法
10-17
在使用过程中，注意正确导入、注册 store，以及在组件中正确引用 state 和 commit mutation，避免出现 `this.$store.commit is not a function` 的错误。同时，遵循 Vuex 的单一状态树原则，保持状态的集中管理，有...
使用 Vue.js 构建大屏可视化系统
qq_42072014的博客
08-04 765
通过上述步骤，你已经具备了构建一个完整的 Vue.js 大屏可视化系统的知识。根据具体需求，你还可以添加更多高级功能，如动态加载图表数据、实时数据流等。
【Vue3】组件通信之provide&inject
又言又语
08-04 599
本文介绍 Vue3 中如何使用provide和inject实现父组件向子组件的子组件传数据，即向其孙子组件传数据。父组件向子组件传数据，实现方案有：propsv-model$ref默认插槽 / 具名插槽子组件向父组件传数据propsv-model$parent自定义事件作用域插槽父组件向子组件的子组件传数据，即向孙子组件传数据$attrsproviderinject任意组件间传数据mittPinia使用provide和inject实现跨组件传数据与$attrs。
Vue的学习（二）
最新发布
weixin_65450681的博客
08-04 807
数据发生变化会影响到视图 而v-bind绑定的数据视图变化 而数据不受影响 这就是单向的数据v-model 双向数据绑定 数据改变则视图发生变化 视图改变 则数据响应发生变化代码展示。
Vue.js 循环语句
wjs2024的博客
08-04 185
Vue.js 是一种流行的前端JavaScript框架，用于构建用户界面和单页应用程序。在Vue.js中，循环语句用于重复渲染元素或组件，这通常与数组或对象数据结合使用。本文将详细介绍Vue.js中的循环语句，包括基本用法、高级特性以及最佳实践。
vue知识
qq_16570607的博客
08-04 282
Vue2使⽤的是选项类型API（Options API），Vue3使⽤的是合成型API（Composition API）。vue3:数据和⽅法都定义在setup中，并统⼀进⾏return{}。
vue.runtime.esm.js:3049 TypeError: this.three.camera.matrixWorld.addEventListener is not a function
06-01
很抱歉，我之前的回答有误。`matrixWorld` 是一个属性，不是一个事件。正确的监听方式应该是在一个 `requestAnimationFrame` 循环中，每一帧检查 `matrixWorld` 是否发生了改变。以下是针对相机的示例代码： ```javascript // 创建场景、相机、渲染器等 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); // 初始化相机矩阵 camera.updateMatrixWorld(); // 用于存储上一帧的相机矩阵 let lastCameraMatrixWorld = new THREE.Matrix4().copy(camera.matrixWorld); // 创建一个检查函数，用于检查相机矩阵是否发生了变化 function checkCameraMatrixWorld() { if (!lastCameraMatrixWorld.equals(camera.matrixWorld)) { console.log('camera.matrixWorld has changed!'); lastCameraMatrixWorld.copy(camera.matrixWorld); } // 在下一帧继续检查 requestAnimationFrame(checkCameraMatrixWorld); } // 开始检查相机矩阵的变化 requestAnimationFrame(checkCameraMatrixWorld); // 渲染场景 renderer.render(scene, camera); ``` 这份代码会在控制台输出相机矩阵是否发生了变化，并在下一帧继续检查。你也可以将检查函数封装到一个 Vue 组件中，然后在 `mounted` 钩子中调用它。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值