使用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 相关文章推荐
javascript 中对象的继承〔转贴〕
Jan 22 Javascript
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
jquery 新手学习常见问题解决方法
Apr 18 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
tangram.js库实现js类的方式实例分析
Jan 06 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 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
超级简单的发送邮件程序
2006/10/09 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
2015/03/01 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
用python读写excel的方法
2014/11/18 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
python截取两个单词之间的内容方法
2018/12/25 Python
后勤人员自我评价怎么写
2013/09/19 职场文书
《挑山工》的教学反思
2014/02/16 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
安全生产活动月方案
2014/03/09 职场文书
调查研究项目计划书
2014/04/29 职场文书
法律专业自荐信
2014/06/03 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
《花钟》教学反思
2016/02/17 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
python实现A*寻路算法
2021/06/13 Python
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers