使用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 相关文章推荐
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
JavaScript中将数组进行合并的基本方法讲解
Mar 07 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
利用JS制作万年历的方法
Aug 16 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
js实现手机web图片左右滑动效果
Dec 29 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
vue实现简单计算商品价格
Sep 14 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
详解使用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和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
python中黄金分割法实现方法
2015/05/06 Python
Python实现的字典值比较功能示例
2018/01/08 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
python实现小球弹跳效果
2019/05/10 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
Django如何实现防止XSS攻击
2020/10/13 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
单位单身证明范本
2014/01/11 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
党员转正意见怎么写
2015/06/03 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
总结Python使用过程中的bug
2021/06/18 Python
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技