vue axios 上传文件 xhr.addEventListener is not a function(…) 问题修复 不用卸载 mockjs

已于 2023-05-05 15:55:08 修改
阅读量584 收藏
点赞数
文章标签： javascript vue.js 前端
于 2022-09-17 15:44:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42489414/article/details/126906136
版权

vue axios 上传文件 xhr.addEventListener is not a function(…) 问题修复 不用卸载 mockjs

	无法上传的原因是因为 mockjs 将 axios请求	的 XhrRequest 修改成了MockXhrRequest 导致找不到上传文件返回的进度

  1. 在 node_modules - mockjs - dist - mock.js 文件中写入 MockXMLHttpRequest.prototype.upload = xhr.upload 这步可以实现打包后线上环境也可以用在这里插入图片描述

  2. 在 node_modules - mockjs - src - mock -xhr - xhr,js 文件中添加 MockXMLHttpRequest.prototype.upload = xhr.upload
    在这里插入图片描述

  3. 至此就可以将项目 重新 npm run dev 打包上线了

阿野嘎嘎
关注
vue3 - element-plus报错TypeError:t.upload.addEventListener is not a function，vue+element组件库控制台报错详细解决教程
高级前端工程师
07-09 2153
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项目】开启mock，threejs模型数据无法加载
onionlsh的博客
02-05 1098
场景：项目需求使用threeJS加载模型，模型数据放在OSS上；前端开发时，使用mock模拟接口数据。 因为mock会对所有的http请求进行拦截，源码会根据是否有匹配的数据模板，来决定走原生XHR还是mockXHR，附上mock初始化request的源码： // 初始化 Request 相关的属性和方法 Util.extend(MockXMLHttpRequest.prototype, { // https://xhr.spec.whatwg.org/#the-open()-method
【Vue】UI组件上传图片，爆 xhr.upload.addEventListener is not a function 错误
m0_62811051的博客
12-09 2530
这个问题主要是因为我在写后台管理的时候使用mockjs，但是之后还要用它模拟数据，不可能将其卸掉，那么就在node_modules文件里面下手。然后找到 node_modules/mockjs/src/xhr/xhr.js （上面图示的第二个文件）的第 216 行再次加入上面那行代码。
upload.addEventListener is not a function报错
最新发布
weixin_43784243的博客
08-02 382
upload.addEventListener is not a function
Vue上传功能:****.upload.addEventListener is not a function
G佳伟
10-21 4387
VUE上传功能本地上传正常，打包上传nginx后报错TypeError: ***.upload.addEventListener is not a function。
老项目使用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 1804
本人在使用vue开发一套后台系统时，碰到了一个上传文件的需求，因为平时做的上传是使用ajax的方式来进行上传。 现在是使用axios来进行上传，方式没有什么改变： npm i axios 直接上 很简单的一个效果。 但是，项目经理要求显示上传文件的进度，这也没什么难得，无非就是多了一步，监听‘progress’，写个效果就OK了。 于是： 一切都如期进行着。 但是当我发送...
2022/8/12 xhr的基本使用以及替换的内容和跨域同源原理以及上传文件的案例
weixin_54534229的博客
08-12 615
xhr用于在后台与服务器交换数据，formdata表单管理数据，axios替代xhr，获取进度条动画，同源和跨域定义
2022-02-08 axios笔记(四) axios.create()创建axios实例,设置拦截器,axios取消请求
GAARA
02-08 612
文章目录 1.使用axios.create(config)创建axios实例 主要用途:在项目中,对axios的二次封装(面试必问) 语法和结构 示例(待验证.......) 2.设置拦截器 3.axios取消请求 1.使用axios.create(config)创建axios实例 主要用途:在项目中,对axios的二次封装(面试必问) 为什么叫二次封装? 因为axios({})请求函数本身就是一个基于promise的、对xhr对象的封装函数 语法和结构 const instance=axios.cr
XHR 文件上传进度条原理解析
weixin_33962621的博客
01-27 1871
前言 前几天再写自己的一个后台模板。有个功能是实现上传进度条。 那么ojk了，上网上找下上传进度条的实现。 (这个截图是我已经写的好的) 此刻我突然想到了为啥我不看看ng-zorro 得代码怎么写的，他肯定写的有上传进度条得功能…… 在 github.com/NG-ZORRO/ng… 第248行处发现了这个…… return this.http.request(req).subscrib...
笔记,前端重点 js,es6,vue2,vue3,小程序...... (记得收藏)
qq_61686552的博客
06-16 816
前端 重点，重点，重点
实现文件上传进度条及解决request.upload.addEventListener in not a function问题
总结，交流，记录，成长
09-30 8178
使用axios上传文件时需要进度条，可通过监听axios的onUploadProgress获取当前文件上传进度，进度条可以用antd的Progress 实现过程中出现问题request.upload.addEventListener in not a function。 参考南柯一梦的博客https://www.cnblogs.com/leeke98/p/10491358.html 原来和mock...
VUE上传功能本地上传正常，打包上传后报错TypeError: ***.upload.addEventListener is not a function
dxn16638400024的博客
07-28 893
尝试使用 Vue CLI 提供的打包分析工具，查看哪些文件被打包进了你的代码中，是否有可能因为某些文件没有被正确打包导致了问题。2.文件node_modules/mockjs/src/mock/xhr/xhr.js 第216行。这个错误很可能是因为在打包后，文件的路径或者名称发生了变化，导致代码中的某些方法无法正确找到。确认你的上传代码是否与打包后的代码在同一目录下或同一级目录下，否则需要修改引用路径。确认你的上传代码路径是否正确，是否有被正确引入。
vue打包报错elementui上传组件 打包后报错t.upload.addEventListener is not a function
ddf__的博客
12-30 304
在node_modules/mockjs/dist/mock.js文件的大约8312行添加。同时修改node_modules/mockjs/src/xhr/xhr.js 第216行。打包上传出现了这个错误。
vue项目使用elementui上传组件 打包后报错t.upload.addEventListener is not a function的解决方案
MIYAOW
12-29 1879
同时在node_modules/mockjs/src/xhr/xhr.js 文件的第216行和node_modules/mockjs/dist/mock.js文件的大约8312行处添加以下代码。项目打包部署到宝塔上后，打开网页，上传东西时出现了一个报错，但是在本地开发环境是没有问题的。找到后打开文件大约在8312行的位置添加以下代码。
vue项目使用elementui上传组件 打包后报错t.upload.addEventListener is not a function
苦夏木禾
10-27 1225
vue项目使用elementui上传组件 打包后报错t.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 加入以下代码: 这样在开发环境是没问题了. 对于生产环境的处理 ...
this.axios is not a function at VueComponent.
05-12
这个错误通常是因为你在Vue组件中使用了axios，但是没有正确地引入axios或者没有在组件中定义axios。 最好的解决方法是在你的Vue项目中安装axios，并在需要使用它的组件中引入它。在组件中引入axios的方式可以是全局引入，也可以是局部引入。 全局引入axios的方式是在main.js中引入axios并将其挂载在Vue原型上，这样所有的组件都可以使用它： ```javascript import Vue from 'vue' import axios from 'axios' Vue.prototype.$http = axios ``` 局部引入axios的方式是在组件中引入axios，并在需要使用它的方法中调用： ```javascript import axios from 'axios' export default { methods: { fetchData () { axios.get('/api/data') .then(response => { // handle success }) .catch(error => { // handle error }) } } } ``` 如果你已经正确地引入了axios并且仍然遇到这个错误，那么可能是因为你的axios版本不兼容。尝试升级axios版本或者使用其他HTTP库来发送请求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值