el-upload进度条消失。 本地运行有进度条，部署服务器后进度条消失

已于 2023-04-13 13:46:25 修改
阅读量864 收藏 2
点赞数 4
文章标签： vue.js javascript 前端
于 2023-04-13 13:44:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42196055/article/details/130128546
版权
文章讲述了在使用vue-element-admin时遇到el-upload组件的on-progress事件不触发的问题，原因是mockjs重新声明了XMLHttpRequest，导致el-upload的progress功能失效。解决方案是在main.js中注释掉mock相关代码。

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

百度了好久，都是什么自定义上传，可是我没有用自定义上传啊！

我承认我慌了

后来谷歌了一下找到了，气死我了，辣鸡百度，这里提供给还在百度却没百度到的。不知道有没有遇到和我一样的哈哈

在main.js找到mock，注释掉

 el-upload的  const xhr = new XMLHttpRequest() 而mockjs会重新声明一个XMLHttpRequest导致el-upload的progress失效

大致原文：来自issue：el-upload组件的on-progress不能触发 #could not triggle el-upload on-progress · Issue #445 · PanJiaChen/vue-element-admin · GitHub

Vue + el-upload阿里云文件上传进度条功能，阿里云文件上传切片进度条功能实现，el-upload文件上传真实进度条
weixin_41346436的博客
08-02 2177
阿里云文件上传进度条
elementUI自定义upload组件，进度条消失解决方法
illusionGD的博客
04-09 3761
相信有些小伙伴用elementUI的upload组件时，通过`http-request`属性重写了上传的方法， 然后发现文件列表的进度条消失了ㄟ( ▔, ▔ )ㄏ，下面来看看怎么解决吧。（下面的列子主要是上传视频文件） 重点 进度条的显示效果主要由下面几点决定的： 1.file-list绑定的数组，该数组里面有多少个文件对象，列表就会显示多少个 :file-list="videoFileList" //videoFileList是自定义的，存放视频文件的数组 2.列表里面的进度条显示，跟绑定的数组里
element中upload上传组件自带的进度条消失问题
qq_57693025的博客
08-07 2514
这是我的第一篇博客，如果有写的不对的地方，还请指正。另外，问题虽然解决了，但是却还是不太明白，我感觉很有可能是我的写法有问题，想问下有大佬知道原因吗。改了之后，自信保存，然后自测，发现没起作用，于是我又接着搜索，尝试了其他自定义进度条的方式，还是不能动态显示进度条数据，然后又是搜索。最后实在没辙了，干脆死马当活马医，把封装好的api换成最原始的axios，它居然可以了！说是项目中使用了的mock的原因，但是我全局搜索了项目，确实是没有用到mock。赶时间的可以直接拉到最后。
el-upload不显示进度条
最新发布
weixin_46394325的博客
09-29 837
el-upload自定义接口上传文件不显示进度条问题
【前端学习记录】vue中使用el-upload组件时，上传文件进度条没有实时更新
Note_creek的博客
07-03 4243
使用el-upload组件时，上传文件时的进度条没有实时更新的解决思路
自定义elment-ui中的el-upload组件上传列表显示及进度条问题及base64转码
l976425836的博客
10-15 1853
使用el-upload组件上传没有其他要求时进度条显示是没有问题的，但是要对上传的数据进行特殊处理时（如转成base64等），就需要用自定义上传用http-request方法，这时进度条就不显示了或者显示有问题，查了很多资料大多数是针对单文件上传的，多文件上传几乎没有，于是自己决定实现一个 一、 ui <el-upload ref="uploadMutiple" action="" :show-file-list="false" .
填坑日志-elementUI el-upload上传组件没有进度条
weixin_33937778的博客
08-02 5748
文档中使用el-upload组件上传有上传进度显示，如图： 但是我上传时没有进度条，直接显示完成状态，但是后台还是在上传中。 直接copy官方代码进来，一模一样的接口放进去。还是不显示。 剩下的只有可能是环境问题，配置了什么插件冲突了。 搜索网上，又人遇到相同的问题。回答原因是： el-upload的源码中 const xhr = new XMLHttpRequest() 而mockjs会重新声...
el-upload进度条
09-15
你可以使用以下步骤来实现el-upload进度条： 1. 首先，确保你已经安装并引入了element-ui库。可以在你的项目中添加以下代码来引入el-upload组件： ```vue import { Upload } from 'element-ui'; import 'element-ui...
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
在本篇文章中，我们将详细探讨如何在vue-cli3.0环境中使用Element UI的上传组件el-upload。el-upload组件允许用户上传文件，并且可以进行一系列的定制和限制，以满足各种需求。 首先，`<el-upload>`组件的基本用法...
el-upload 进度条
08-06
要在el-upload组件中添加进度条，你可以使用`show-upload-list`属性来显示上传列表，并利用插槽来自定义列表的内容。以下是一个示例代码： ```html <el-upload ref="upload" class="upload-demo" action=...
vue结合el-upload实现腾讯云视频上传功能
10-15
7. **进度条展示**：使用Element UI的el-progress组件来展示视频上传的进度，通过el-upload组件的progress属性来触发进度条的更新。 8. **获取视频上传签名**：通过与后端通信获取到腾讯云视频点播服务需要的上传...
element ui 图片自定义上传进度条消失问题
qq_42852004的博客
05-06 5866
element ui 图片自定义上传进度条消失问题 http-request自定义上传后出现的问题：（1）element ui自定义进度条会被禁止 第一步：通过查找网上的资源后，发现axios请求的参数中使用 onUploadProgress事件下面的progressEvent可以监控到图片上传的进度 第二步：需要引入element ui的进度条组件 第三步：在data中注册percentag...
ElementUI 自定义上传没有进度条
Mr-k的博客
01-09 1660
官网演示案例上有进度条展示 将代码复制到本地以后发现没有进度条，查看main.js文件是否配置了mock.js文件，如果有，注掉即可
el-upload 自定义上传+真实进度条
shelter123456的博客
03-14 4289
el-upload 自己上传+进度条
解决el-upload组件中on-progress钩子函数无法触发，进度条无效的问题
热门推荐
可可爱爱的你吖的博客
03-10 1万+
解决el-upload组件中on-progress钩子函数无法触发，进度条无效的问题 上传文件的时候需要用到进度条，但是on-progress钩子函数无法触发 搜了好多资料都是说是跟模拟数据mock有关，注释掉即可，但是。。。项目里一搜一大堆mock,还要保证后端接口数据调取成功，这。。。。怕不是要一行一行代码的瞅了？ on-progress用不了，用on-change代替（上传过程中都会调用这个方法，file.status有ready,sucess等状态来判断文件是否上传成功），但是我是视频上传到oss上
vue文件上传，文件打不开。文件上传 on-progress不触发
m0_52946104的博客
07-17 1478
【代码】vue文件上传，文件打不开。文件上传 on-progress不触发。
element-ui 上传组件进度条解决方法
肖肖肖丽珠的博客
08-21 1万+
let form = new FormData(); //uploader为之前提到的实例 form.append("file", uploader.file); axios .post(url,form, { headers: { "Content-Type": "multipart/form-data" }, onUploadProgress: pr...
iview UI上传on-progress无效解决方案屏蔽mock
飞扬小阁
10-23 1498
在上传文件时要做进度显示 需要用到xhr.upload.onprogress事件，如果用到mock.js模拟数据的话，mockjs会重新声明一个XMLHttpRequest导致el-upload的progress失效，则无法触发onprogress事件 直接在main.js里把引用的mock.js屏蔽即可。 ...
el-upload上传文件展示文件上传进度
song_song0927的博客
03-14 3693
el-upload上传文件显示文件上传的进度
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值