vue.js通过element-ui实现上传进度条展示
一、简单记一下：
1、使用的组件：el-upload / el-dialog /el-progress
文章图片
文章图片
2、上传事件处理
文章图片
文章图片
3、axios发送http请求，并通过回调函数传递进度progress
文章图片
二、遇到的难点：
1、progress获取
直接写到方法里好像获取不到，使用callback回调函数解决的；
2、进度展示
将progress给进度条组件，经大神指导，将progress直接封装到file中，然后获取；
3、多文件封装（成数组）
也是大神指点后，弄懂了，见代码（总之不懂就多多百度，包括箭头函数、array.fileter、this.$set）；
4、然后搞了很久很久的 上传进度窗口遮挡主页面的问题
这主要通过调节css样式来解决的（前端还得多练习才能有经验解决各种小bug）；
5、vue组件使用过程中父子组件样式问题
有一处组件改了样式后，影响另外一个弹出窗的效果；这时可以定义一个div将这个el-dialog包起来，然后通过父子选择器的方式定位到这个需要修改的
【vue.js通过element-ui实现上传进度条展示】三、最后效果是这样的，虽然还有很多可以完善 的：
文章图片
推荐阅读
- gitlab|gitlab 通过备份还原 admin/runner 500 Internal Server Error
- whlie循环和for循环的应用
- VueX（Vuex|VueX（Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)
- 如何通过锻炼的方法治疗前列腺肥大
- vue.js|vue中使用axios封装成request使用
- 通过复盘快速成长（附模板）
- MyBatis|MyBatis Generator配置
- 运维|如何限制IP 通过 SSH连接服务器
- 运维|Linux 禁止用户或 IP通过 SSH 登录
- 青椒板书--足球