使用axios实现上传图片进度条功能


Posted in Javascript onDecember 21, 2017

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实现上传图片进度条功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery 简便实现页面元素数据验证功能
Mar 24 Javascript
js中if语句的几种优化代码写法
Mar 12 Javascript
JavaScript中的undefined学习总结
Nov 30 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 Javascript
详解使用webpack构建多页面应用
Dec 21 #Javascript
使用ajax的post同步执行(实现方法)
Dec 21 #Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 #jQuery
原生js+cookie实现购物车功能的方法分析
Dec 21 #Javascript
JS实现去除数组中重复json的方法示例
Dec 21 #Javascript
解析vue中的$mount
Dec 21 #Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 #Javascript
You might like
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
使用PHP socke 向指定页面提交数据
2008/07/23 PHP
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
php根据操作系统转换文件名大小写的方法
2014/02/24 PHP
初识PHP
2014/09/28 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
javascript将非数值转换为数值
2018/09/13 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
python算法表示概念扫盲教程
2017/04/13 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
python线程里哪种模块比较适合
2020/08/02 Python
django中cookiecutter的使用教程
2020/12/03 Python
巴黎一票通:The Paris Pass
2018/02/10 全球购物
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
linux比较文件内容的命令是什么
2013/03/04 面试题
物流管理毕业生自荐信
2013/10/24 职场文书
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
大学生的网上创业计划书
2013/12/31 职场文书
公司车辆维修管理制度
2015/08/05 职场文书