使用axios实现上传图片进度条功能
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
Features
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
下面给大家介绍使用axios实现上传图片进度条功能,具体内容介绍如下所示:
在最近做的项目中,一个手机页面最多要上传几十张图片,虽然对照片做了压缩处理,不过最后还是很大,如果网卡的话,上传的时间很差,如果一直在loading的话,用户都不知道什自己上传了多少,为了更直观的展现上传的进度,最好显示进度条,和显示上传的百分比;
项目用的是vuejs框架,mint-ui做为ui框架;请求的是vue官方推荐的axios(真的很强大);在axios官方介绍了使用原生上传处理进度事件(具体参考这里,这里有中文的axios官方介绍):
onUploadProgress: function (progressEvent) { // 对原生进度事件的处理 },
因为使用vuejs,对于接口的数据请求,为方便管理,需要统一的管理。如果放在每个组件里,不方便日后的维护和管理;在reqwest.js文件里,定义了一个uploadPhoto方法,该方法有三个参数,分别是参数,和两个回调函数,参数就是我们要上传图片的需要的额参数;而第一个回调函数,是获取上传进度包含的数据,第二回调是获取上传成功失败,后台返回的数据;来进行页面的下一步操作。
uploadPhoto(payload,callback1,callback2){ axios({ url:BASE_URL + '/handler/material/upload', method:'post', onUploadProgress:function(progressEvent){ //原生获取上传进度的事件 if(progressEvent.lengthComputable){ //属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量 //如果lengthComputable为false,就获取不到progressEvent.total和progressEvent.loaded callback1(progressEvent); } }, data:payload }).then(res =>{ callback2(res.data); }).then(error =>{ console.log(error) }) }
使用mint-ui组件里的Progress组件,在data的方法里定义该组件里的变量precent,该变量是number类型,在定义的时候,注意;
<mt-progress :value="precent" :bar-height="10"> <div slot="end">{{Math.ceil(precent)}}%</div> </mt-progress>
把reqwest.js 这个文件import 进来,获取到uploadPhoto这个方法,根据获取上传的进度,使用$nextTick 这个属性,实时的更新的页面上。
const _this = this; API.uploadPhoto(fd,(res) =>{ let loaded = res.loaded, total = res.total; _this.$nextTick(() =>{ _this.precent = (loaded/total) * 100; }) },(res) =>{ if(res.code === '200'){ MessageBox.alert('图片上传成功').then(action => { console.log('ok'); }); } })
根据上面的方法基本实现图片的上传进度和百分比的显示,剩下的就是ui了,根据自己个性化定制来实现你那完美的需求...
总结
以上所述是小编给大家介绍的使用axios实现上传图片进度条功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- Prometheus是什么?
- Day64:滑动窗口的最大值
- 第10天:NLP补充——朴素贝叶斯(Naive-Bayes)
- Day65:矩阵中的路径
- Day66:机器人的运动范围
- 第11天:NLP补充——主题模式(LDA)
- 一文快速上手Rollup,JavaScript类库打包好帮手
- Day67:剪绳子
- Typecho实现微信发消息:Type时光机
- 插入排序
- Typecho1.1仿简书主题小屏幕菜单栏展开优化
- Typecho1.1仿简书主题大小屏适配
- Typecho1.1文章内链接用新窗口打开的办法
- 搭建一个低配版的Mock Server
- Nginx解决跨域资源问题:No 'Access-Control-Allow-Origin' header is present on the requested resource.