前言

element-ui中有一个上传组件el-upload,进度到100%,后台服务响应处理需要时间,
所以不能显示进度条到100%,要显示为99%,如下图示

在这里插入图片描述
改为
在这里插入图片描述

改动不多,可以手写上传,也可以进行修改源码,这次我们修改element-ui直接修改替换就好了

操作

  1. 下载element-ui源码
    git地址:https://github.com/ElemeFE/element
    在这里插入图片描述
    然后在vscode打开它
  2. 引入依赖
npm install // 不引入依赖包一会是不能打包的
  1. 修改组件的源码
    在这里插入图片描述

  2. 打包

    npm run dist
    

    在这里插入图片描述

  3. 替换你的vue项目element-ui中的lib文件夹

拓展

1.为什么进度显示为100%,需要等一会才会有响应

因为 XMLHttpRequest.onProgress 事件能拿到的是网络传输的字节而已;而“上传进度已完成”,
实际是指浏览器已经把文件传输给了服务端;但是服务端还有额外的处理时间,这段时间对浏览器来说是
不可感知的,它不知道服务端处理需要多久
一般处理思路有这么几种:
1、上传进度设置一个最大值,比如 99%,只有当服务端真正返回结果时才会变到 100%,这种方法最为简单粗暴;
2、尽量减少服务端处理的时间,例如收到文件后交给异步队列去处理,立刻返回给客户端响应,这种方法需要额外
做的事件比较多,开发难度更高一些;
3、客户端分片上传,把大文件变成若干段小“文件”,缺点是浏览器只有支持 HTML5 才支持 FormData 分片。
  1. 为什么直接修改node_modules包资源不起作用
你修改的是element的源码,而你引用的是它编译打包之后的,所以没有生效。
Logo

前往低代码交流专区

更多推荐