填坑日志-elementUI el-upload上传组件没有进度条

最新推荐文章于 2024-04-20 11:50:28 发布
最新推荐文章于 2024-04-20 11:50:28 发布
阅读量5.5k 收藏 1
点赞数 1
文章标签： javascript ui java ViewUI
原文链接：https://juejin.im/post/5b6270b0f265da0f793a8a34
版权

文档中使用el-upload组件上传有上传进度显示，如图：

但是我上传时没有进度条，直接显示完成状态，但是后台还是在上传中。

直接copy官方代码进来，一模一样的接口放进去。还是不显示。

剩下的只有可能是环境问题，配置了什么插件冲突了。

搜索网上，又人遇到相同的问题。回答原因是：

el-upload的源码中 const xhr = new XMLHttpRequest() 而mockjs会重新声明一个XMLHttpRequest导致el-upload的progress失效 你把mock去掉就行了

前端撰写的时候用于模拟数据，使用了mock。现在已经到接口联调了，删除掉mock配置，ok正常！

weixin_33937778
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
element-ui的el-upload自定义上传头像，并显示进度条
monkey-jie的博客
08-24 1万+
element默认的上传头像，并没有进度条的展示，当图片较大或网速较慢时，就会显得卡顿，用户体验很不好。所以就重写了el-upload的上传头像部分，并自定义了上传行为。 效果预览： 根据官方文档，要覆盖默认的行为，要绑定http-request，自定义一个方法来实现。这里使用了el-progress来展示进度条，通过axios的onUploadProgress方法来获取实时的进度。 代码实现：...
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
10-14
主要介绍了vue+elementUI(el-upload)图片压缩,默认同比例压缩操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
php ajax实现文件上传进度条
12-18
本实例是关于php文件上传时进度条的实现，主要采用ajax技术，另外还运用了html5，有需要的朋友可以研究一下。 本实例有两个文件： upload_form.html： <!DOCTYPE html> <html> <head> [removed] function _(el){ return document.getElementById(el); } function uploadFile(){ var file = _("file1").files[0]; // alert(file.name+" | "+file.size+" | "+file.type); var
element-ui 上传组件 自定义上传没有进度条解决方法
w36680130的博客
10-18 962
element-ui 上传组件 自定义上传没有进度条解决方法
element-ui 中 使用＜el-upload＞＜/el-upload＞组件，第二次点击上传无反应
Missbelover的博客
03-09 906
【代码】element-ui 中 使用组件，第二次点击上传无反应。
在做视频上传显示进度的时候遇到的问题，这里模拟一下大概得过程，记录一下。
m0_62317155的博客
06-10 167
我在使用element plus的el-upload视频文件分片上传的过程中，想自己自定义一个上传的文件列表展示，结果在展示进度条的时候遇到了问题，这里大概模拟一下这个过程。顺便记录一下遇到的问题。具体看下面的代码和截图。
el-upload进度条无效，on-progress无效问题解决方案
p15097962069的博客
10-29 5211
el-upload进度条无效，on-progress无效问题解决方案
ElementUI 自定义上传没有进度条
Mr-k的博客
01-09 1558
官网演示案例上有进度条展示 将代码复制到本地以后发现没有进度条，查看main.js文件是否配置了mock.js文件，如果有，注掉即可
ElementUI上传组件，使用自定义上传行为http-request，不显示自带进度条的解决办法(选用axios的onUploadProgress方法)
qq_56018649的博客
09-08 6458
背景： 最近的项目有个上传文件的功能，美工给的设计图和elementUI上传组件差不多，所以想着做起来也比较简单。 功能需求：文件大小判断，文件类型判断，上传显示进度条。 最后完成大概就是这样子： 功能难点： 虽然说组件官网给了很多的例子，但是我项目中自己封装了axios请求，采用了代理服务器解决的跨域问题，所有就没有采用组件本身action，而是选用了http-request进行自定义上传。 这些都比较简单，先上代码...
记一次多文件上传 使用element框架的实例 不显示进度条 提交按钮自己控制
weixin_43152108的博客
11-20 570
效果 文件上传的时候未完成不允许提交表单 显示上传进度(不能覆盖element不然没有上传进度条) 上代码 <el-upload :on-progress="handleprogress" class="upload-demo" action="https://www.chineseafs-tc.org.cn/cky-rest/upload/upload"
element-ui el-upload 上传 进度状态展示 进度条
m0_52775179的博客
06-05 7649
setTimeout( () => {this.progressFlag = false}, 1000) // 一秒后关闭进度条。// 动态获取文件上传进度。progressFlag: false, // 关闭进度条。loadProgress: 0, // 动态显示进度条。的时候想要展示文件上传进度（百分比）。-- 进度条 -->
el-upload实现上传文件并展示进度条
weixin_44813858的博客
03-22 6744
el-upload上传文件实现进度条
elemetUi 组件--el-upload实现上传Excel文件的实例
08-29
主要介绍了elemetUi 组件--el-upload实现上传Excel文件的实例的相关资料,希望通过本文大家能够实现这样的功能，需要的朋友可以参考下
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
主要介绍了vue-cli3.0+element-ui上传组件el-upload的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
通过vue的el-upload组件上传文件的例子
05-31
vue上传文件
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 346
官网代码（在取消选中状态的时候不生效）
Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍
qq_43641110的博客
04-18 947
​​​​​​​。
一个小时学习javaScript
最新发布
weixin_43064364的博客
04-20 706
JavaScript 是一种广泛使用的编程语言，最初被设计来增加网页的交互性，让用户能够与网页上的元素进行互动。自从1995年被引入以来，JavaScript已经发展成为Web开发中不可或缺的一部分，并且其用途已经大大扩展到了网页之外。
elementui中el-upload组件删除时闪动问题处理
06-01
如果在 ElementUI 中使用上传组件 `el-upload` 删除文件时出现了闪动问题，可以通过以下方法解决： 1. 设置 transition 的 name 属性 在使用上传组件时，可以在 `el-upload-list` 组件外层添加一个 `transition` 组件，并为其设置 `name` 属性，如下所示： ``` <transition name="fade"> <el-upload-list // 其他配置项 ></el-upload-list> </transition> ``` 然后在样式文件中添加如下代码： ``` .fade-enter-active, .fade-leave-active { transition: opacity .2s; } .fade-enter, .fade-leave-to { opacity: 0; } ``` 这样就可以为删除文件时的过渡添加渐隐效果，避免出现闪动问题。 2. 禁用 transition 组件的动画效果 如果您不需要为删除文件时添加过渡动画效果，可以直接禁用 `transition` 组件的动画效果，如下所示： ``` <transition :name="''"> <el-upload-list // 其他配置项 ></el-upload-list> </transition> ``` 这样就可以禁用 `transition` 组件的过渡效果，避免出现闪动问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值