【Vue】如何修改node_modules下的element-ui源码_vue node_modules 源码

前言

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

改为

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

操作

1. 下载element-ui源码
   git地址：https://github.com/ElemeFE/element
   
   然后在vscode打开它
2. 引入依赖

npm install // 不引入依赖包一会是不能打包的
1

3. 修改组件的源码
   

4. 打包

   npm run dist
   1

   

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

拓展

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

因为 XMLHttpRequest.onProgress 事件能拿到的是网络传输的字节而已；而“上传进度已完成”，
实际是指浏览器已经把文件传输给了服务端；但是服务端还有额外的处理时间，这段时间对浏览器来说是
不可感知的，它不知道服务端处理需要多久
一般处理思路有这么几种：
1、上传进度设置一个最大值，比如 99%，只有当服务端真正返回结果时才会变到 100%，这种方法最为简单粗暴；
2、尽量减少服务端处理的时间，例如收到文件后交给异步队列去处理，立刻返回给客户端响应，这种方法需要额外
做的事件比较多，开发难度更高一些；
3、客户端分片上传，把大文件变成若干段小“文件”，缺点是浏览器只有支持 HTML5 才支持 FormData 分片。
1
2
3
4
5
6
7
8

2. 为什么直接修改node_modules包资源不起作用

你修改的是element的源码，而你引用的是它编译打包之后的，所以没有生效。
1