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

最终终于找到原因：

在上传文件时要做进度显示需要用到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. redis之master.slave主从复制

    简介 主机数据更新后根据配置和策略,自动同步到备机的master/slave机制,master以写为主,slave以读为主 从库配置 配置从库,不配主库 配置从库: 格式: slaveof 主库ip ...

  2. P1613 跑路【倍增】【最短路】

    题目描述 小A的工作不仅繁琐,更有苛刻的规定,要求小A每天早上在6:00之前到达公司,否则这个月工资清零.可是小A偏偏又有赖床的坏毛病.于是为了保住自己的工资,小A买了一个十分牛B的空间跑路器,每秒钟 ...

  3. ssh远程连接到Ubuntu

    1.ubuntu首先得安装ssh sudo apt-get install openssh-server 2.启动ssh sudo /etc/init.d/ssh start 3.检查是否开启 ps ...

  4. MySQL安装详细步骤(附迅雷下载链接）

    环境:windows10.64bit.mysql 8.0.19 迅雷下载链接8.0版本 https://cdn.mysql.com//Downloads/MySQLInstaller/mysql-in ...

  5. 吴裕雄--天生自然 R语言开发学习：R语言的安装与配置

    下载R语言和开发工具RStudio安装包 先安装R

  6. JN_0012：win10的开机启动文件夹

    1,登录所有用户时都能开机启动的启动文件夹.所有用户通用的开机启动文件夹地址是 C:\ProgramData\Microsoft\Windows\Start Menu\Programs\StartUp ...

  7. Pikachu-Unsafe Fileupload（不安全的文件上传）

    不安全的文件上传漏洞概述 文件上传功能在web应用系统很常见,比如很多网站注册的时候需要上传头像.上传附件等等.当用户点击上传按钮后,后台会对上传的文件进行判断 比如是否是指定的类型.后缀名.大小等等 ...

  8. Windows下Anaconda安装、换源与更新

    Anaconda指的是一个开源的Python发行版本,其包含了conda.Python等180多个科学包及其依赖项.当你尝试pip install xxx时出现各种意外和依赖问题,那么conda就是一 ...

  9. 886. 求组合数 II（模板）

    数据范围较大, a,b都是1e5 直接根据公式预处理  1/i就是求i的逆元(逆元求法:mod为质数,逆元就是 i^(mod-2)%mod ) O(N*logN) import java.util.S ...

  10. MVC5+EF6 入门完整教程八：数据迁移

    https://www.cnblogs.com/miro/p/4164076.html