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

最终终于找到原因：

在上传文件时要做进度显示需要用到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. Python 编程入门（1）：基本数据类型

    以下所有例子都基于最新版本的 Python,为了便于消化,每一篇都尽量短小精悍,希望你能尽力去掌握 Python 编程的「概念」,可以的话去动手试一下这些例子(就算目前还没完全搞懂),加深理解. 程序 ...

  2. 使用Xcode7非美刀购买开发者帐号,非越狱安装IOS ipa

    做苹果开发,需要至少99美刀注册开发者帐号,这样写出来的程序才可以在真机上运行调试,才可以发布到app store,现在xcode7之后苹果有了调整,除了发布到app store还是需要美刀帐号,其它 ...

  3. C#_.net core 3.0自定义读取.csv文件数据_解决首行不是标题的问题_Linqtocsv改进

    linqtocsv文件有不太好的地方就是:无法设置标题的行数,默认首行就是标题,这不是很尴尬吗?   并不是所有的csv文件严格写的首行是标题,下面全是数据,我接受的任务就是读取很多.csv报表数据, ...

  4. Oracle命令行导入dmp文件

    一.导入准备 使用impdp命令,需要在oracle数据库服务器操作: 使用sqlplus或者Oracle客户端(PL/SQL) 链接到相应的Oracle数据库实例,进行如下操作 1. 创建逻辑目录, ...

  5. spring security之web应用安全

    一.什么是web应用安全,为了安全我们要做哪些事情? 保护web资源不受侵害(资源:用户信息.用户财产.web数据信息等)对访问者的认证.授权,指定的用户才可以访问资源访问者的信息及操作得到保护(xs ...

  6. idea git pull fatal: bad config line 1 in file /.gitconfig 问题处理

    在网上搜好多都是直接改username和useremail的,但是没有说明原理. 因为我的电脑是新入职接手上一家的电脑 后来在git bash 里面用$ git config user.name 原来 ...

  7. lombok版本过低报错

    调试报错Error:java: java.lang.ExceptionInInitializerError  com.sun.tools.javac.code.TypeTags JAVA12调整原有项 ...

  8. CLion快捷键设置

    CLion自动格式化的快捷键默认为Ctrl+Alt+L,代码前后跳转CRTL+ALT+Left或CRTL+ALT+Right 但有时会和系统的快捷键冲突,需要修改CLion里面的快捷键 如图:sett ...

  9. MySQL 8 服务器组件

    MySQL 服务器包含了一个基于组件的架构,用于扩展服务器功能.服务器和其他组件可以使用组件提供的服务.(在使用服务方面,服务器也是一个组件,等同于其他组件).组件之间交互仅通过他们各自提供的服务. ...

  10. Android显示单元--像素、分辨率、颜色

    1.像素 老子曾说“天下难事必作于易,天下大事必作于细”,Android开发也是一样,再复杂的App也无非就是数百万个像素点的排列组合.像素虽然看似简单,但是里面大有学问.如果在开发时对像素单位不以为 ...