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

最终终于找到原因：

在上传文件时要做进度显示需要用到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. Android布局管理器-使用LinearLayout实现简单的登录窗口布局

    场景 Android布局管理器-从实例入手学习相对布局管理器的使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1038389 ...

  2. Windwos应急响应和系统加固(1)——Windwos操作系统版本介绍

    Windwos操作系统版本介绍 1. Micorsoft  Windows XP  ·Microsoft官方发布时间以及终止提供服务时间:2001.10.25-2014.4.8   产生漏洞:MS08 ...

  3. Vue之计算属性Computed和属性监听Watch，Computed和Watch的区别

    一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷. 例如: <div id="app"> {{ myname ...

  4. jmeter导入jmx文件报错：missing class com.thoughtworks.xstream.converters.ConversionException

    有的时候我们会参考别人的jmx文件,但是在导入的时候会报错如下图: 实际上是告诉我们缺少jar包所引起的,下载对应jar包放到jmeter安装目录对应的lib/ext下就可以了,如下图: jmeter ...

  5. go 并发编程

    进程 线程 协程 设置golang运行cpu数 1.主线程和协程同时执行 package main import ( "fmt" "strconv" " ...

  6. 程序员为什么害怕低代码？ZT

    转自:https://www.jianshu.com/p/cd89fe94cd30 低代码 是一种近些年兴起的企业软件快速开发技术和工具.借助低代码使用者无需编码即可完成企业应用的常用功能,少量编码扩 ...

  7. docker - apt-get更换国内源解决Dockerfile构建速度过慢

    背景 使用ubuntu镜像一般apt-get源地址都是在国外导致在构建时因为源地址问题导致下载速度极其得慢 在构建中应事先修改apt-get源地址来避免因下载速度过慢导致的构建缓慢问题 方案 在Doc ...

  8. Process、管理者权限、注册表、xml修改

    //判断是否有管理者权限 WindowsPrincipal principal = new WindowsPrincipal(WindowsIdentity.GetCurrent()); if (!p ...

  9. MY_0003：设置界面显示单位

    1,设置单位

  10. 修改Ubuntu的apt-get源为国内镜像源的方法

    1.原文件备份 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak 2.编辑源列表文件 sudo vim /etc/apt/sources. ...