【Vue】如何修改node_modules下的element-ui源码
前言element-ui中有一个上传组件el-upload,进度到100%,后台服务响应处理需要时间,所以不能显示进度条到100%,要显示为99%,如下图示改为改动不多,可以手写上传,也可以进行修改源码,这次我们修改element-ui直接修改替换就好了操作下载element-ui源码git地址:https://github.com/ElemeFE/element引入依赖npm install /
·
前言
element-ui中有一个上传组件el-upload,进度到100%,后台服务响应处理需要时间,
所以不能显示进度条到100%,要显示为99%,如下图示
改为
改动不多,可以手写上传,也可以进行修改源码,这次我们修改element-ui直接修改替换就好了
操作
- 下载element-ui源码
git地址:https://github.com/ElemeFE/element
然后在vscode打开它 - 引入依赖
npm install // 不引入依赖包一会是不能打包的
-
修改组件的源码
-
打包
npm run dist
-
替换你的vue项目element-ui中的lib文件夹
拓展
1.为什么进度显示为100%,需要等一会才会有响应
因为 XMLHttpRequest.onProgress 事件能拿到的是网络传输的字节而已;而“上传进度已完成”,
实际是指浏览器已经把文件传输给了服务端;但是服务端还有额外的处理时间,这段时间对浏览器来说是
不可感知的,它不知道服务端处理需要多久
一般处理思路有这么几种:
1、上传进度设置一个最大值,比如 99%,只有当服务端真正返回结果时才会变到 100%,这种方法最为简单粗暴;
2、尽量减少服务端处理的时间,例如收到文件后交给异步队列去处理,立刻返回给客户端响应,这种方法需要额外
做的事件比较多,开发难度更高一些;
3、客户端分片上传,把大文件变成若干段小“文件”,缺点是浏览器只有支持 HTML5 才支持 FormData 分片。
- 为什么直接修改node_modules包资源不起作用
你修改的是element的源码,而你引用的是它编译打包之后的,所以没有生效。
更多推荐
已为社区贡献9条内容
所有评论(0)