使用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 相关文章推荐
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
JS 跳转页面延迟2种方法
Mar 29 Javascript
关于jquery css的使用介绍
Apr 18 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
Jun 08 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 Javascript
详谈Node.js之操作文件系统
Aug 29 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 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
PHP simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
php验证码生成代码
2015/11/11 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
jQuery 白痴级入门教程
2009/11/11 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
管理科学大学生求职信
2013/11/13 职场文书
通信生自我鉴定
2014/01/18 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
社区服务活动小结
2014/07/08 职场文书
超市创意活动方案
2014/08/15 职场文书
Python selenium的这三种等待方式一定要会!
2021/06/10 Python