自己写的例子都是好好的，调试了半天，在项目里怎么都出不来

最终终于找到原因：

在上传文件时要做进度显示需要用到xhr.upload.onprogress事件，此时如果你的项目里用到mock.js模拟数据的话则无法触发onprogress事件

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

这时候只要我们保证后台接口都调试完成的状态下

注掉一行引用的mock的代码即可

这时候再去项目里调试，ok，进度条完美呈现

真是坑啊

vue使用饿了么element-ui框架中的上传组件进度条无法使用，:on-progress钩子无法触发的原因的更多相关文章

  1. vue+element UI + axios封装文件上传及进度条组件

    1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...

  2. layUI框架中文件上传前后端交互及遇到的相关问题

    下面我将讲述一下我在使用layUI框架中文件上传所遇到的问题: 前端jsp页面: <div class="layui-form-item"> <label cla ...

  3. Element UI 框架搭建

    Element UI 框架搭建 1.webpack 全局安装 npm install -g webpack 2.淘宝镜像cnpm安装 npm install -g cnpm --registry=ht ...

  4. VUE -- 对 Element UI table中数据进行二次处理

    时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...

  5. 封装Vue Element的upload上传组件

    本来昨天就想分享封装的这个upload组件,结果刚写了两句话,就被边上的同事给偷窥上了,于是在我全神贯注地写分享的时候他就神不知鬼不觉地突然移动到我身边,腆着脸问我在干啥呢.卧槽你妈,当场就把我吓了一 ...

  6. HTML5 UI框架Kendo UI Web中如何创建自定义组件（二）

    在前面的文章<HTML5 UI框架Kendo UI Web自定义组件(一)>中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容. 使用一个数据源 ...

  7. vue中el-upload上传多图片且携带参数，批量而不是一张一张的解决方案

    现在前端基本不是vue技术栈就是react技术栈. vue技术栈最常用的就是element-ui的ui框架了. 在项目中,我们经常会碰到这种需求:批量上传文件 element-ui 确实也为我们提供了 ...

  8. Vue.js 3.0搭配.NET Core写一个牛B的文件上传组件

    在开发Web应用程序中,文件上传是经常用到的一个功能. 在Jquery时代,做上传功能,一般找jQuery插件就够了,很少有人去探究上传文件插件到底是怎么做的. 简单列一下我们要做的技术点和功能点 使 ...

  9. 从零开始编写自己的C#框架（23）——上传组件使用说明

    文章导航 1.前言 2.上传组件功能说明 3.数据库结构 4.上传配置管理 5.上传组件所使用到的类 6.上传组件调用方法 7.效果演示 8.小结 1.前言 本系列所使用的是上传组件是大神July开发 ...

随机推荐

  1. windows的启动、引导配置

    Win+S -> msconfig

  2. Vue整合d3.v5.js制作--折线图(line)

    先上效果图(x轴固定为时间轴): 图中出现的悬浮框是鼠标悬停效果 1.环境说明: vue版本:"vue": "^2.5.2" d3版本:"d3&quo ...

  3. 简单的说说tippyjs的使用

    我们会接触到很多插件的使用,但是我们该如何的去使用呢,本人建议多学习英语,会对开发很有帮助的 为什么说是多去学习它,接下来我们就来说说: 当你没学习英语看到下面的官网是这样子的 当你会英语了,你就会觉 ...

  4. Warning: curl_setopt() [function.curl-setopt]: CURLOPT_FOLLOWLOCATION cannot be activated when in safe_mode or an open_basedir is set…

    php打印小票错误提示:Warning: curl_setopt() [function.curl-setopt]: CURLOPT_FOLLOWLOCATION cannot be activate ...

  5. java基础--------arraylist（动态数组）和linkedlist（双向链表）的区别

    arraylist使用数组存储数据,所以这样存储的数据根据索引查询的数据速度快,但是新增或者删除元素时需要设计到位移操作,所以比较慢. linkedlist使用双向链表方式存储数据,每个元素都记录前后 ...

  6. AOV拓扑排序实验总结-1

    AOV拓扑排序实验总结-1   实验数据:1.实验输入数据在input.txt文件中2.对于n是指有顶点n个,数据的结束标志是一行0 0.   实验目的:获取优秀的AOV排序算法模板   数据结构安排 ...

  7. SpringBoot从1.5.1→2.2.4项目加包扫雷一：Error:(8, 44) java: 程序包org.springframework.boot.web.support不存在

    更换成新包即可import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

  8. React函数式组件使用Ref

    目录: 简介 useRef forwardRef useImperativeHandle 回调Ref 简介 大家都知道React中的ref属性可以帮助我们获取子组件的实例或者Dom对象,进而对子组件进 ...

  9. 理财收益的计算 计算浮点数的n次方 1466

    题目描述 老傻非常喜欢购买理财产品,而且这款理财产品被推销人员吹得特别高,对于贪财的老傻来说正中下怀,于是在心里盘算着买了它,自己就是亿万富豪,现需要你编写一个程序,帮老傻计算其收益,老傻的投入是R( ...

  10. Linux系统目录结构和常用目录主要存放内容的说明

    目录结构图 常用目录 /: 根目录 一般根目录下只存放目录,在 linux 下有且只有一个根目录,所有的东西都是从这里开始 当在终端里输入 /home,其实是在告诉电脑,先从 /(根目录)开始,再进入 ...