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

最终终于找到原因：

在上传文件时要做进度显示需要用到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-位图

    关于位图,可能大家不太熟悉, 那么位图能干啥呢?位图的内容其实就是普通的字符串,也就是byte数组,我们都知道 byte 8 位无符号整数 0 到 255 说个场景.比如你处理一些业务时候,往往会存在 ...

  2. linux中压缩解压缩命令

    目录 gzip gunzip tar(打包压缩) tar(解包解压) zip unzip bzip2 bunzip2 gzip 解释 命令名称:gzip 命令英文原意:GUN zip 命令所在路径:/ ...

  3. textarea输入文字限制个数

    说明: w-count固定为数字部分的class textarea-active为超出最大输入文字个数报错信息的class html 部分: <div class="wrap wrap ...

  4. vue中keepalive怎么理解？​---vue中文社区

    vue中keepalive怎么理解? 说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码 https://github.com/vuejs/vue/blob/dev/ ...

  5. Markdown语法，及其在typora中的快捷键，学写博客吧！！！

    前言 Markdown (MD) 是现在最流行的一种文档书写语言格式.平常写笔记,写博客,写计划再好不过了.个人觉得使用很简单,右击鼠标,有你想要的操作. Typora是简洁.操作简单.功能强大.方便 ...

  6. 经济学人精读笔记7：动乱当道，你还想买LV吗？

    2020/2/24 经济学人精读笔记7:动乱当道,你还想买LV吗? 标签(空格分隔): 经济学人 Part 1 Luxury goods A tale of two handbags Purveyor ...

  7. 功能强大的截图工具snipaste

    一直都是用的聊天工具的截图功能,今天突然懒得登录了.想想是否有简单的截图工具 结果一搜索就找到了这个,本来没想有多少功能毕竟只是截截图而已,看到主页介绍眼前一亮.虽然不想复杂化,但是这个功能是真的不错 ...

  8. tcp客户端从服务器下载文本文件

    代码讲解: server import socket def send_file_client(new_client_socket, new_client_addr): # 接收客户端需要下载的文件名 ...

  9. 【NLP】暑假课作业1 - 中文分词（前向匹配算法实现）

    作业任务: 使用98年人民日报语料库进行中文分词训练及测试. 作业输入: 98年人民日报语料库(1998-01-105-带音.txt),用80%的数据作为训练集,20%的数据作为验证集. 运行环境: ...

  10. 卸载Windows控制面板的程序和功能中找不到的一些软件的方法

    卸载Windows控制面板的程序和功能中找不到的一些软件的方法 找到卸载程序进行卸载即可