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

 更新时间:2017年12月21日 16:58:23   作者:刈懋  
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。这篇文章主要介绍了使用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实现上传图片进度条功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • js时间日期格式化封装函数

    js时间日期格式化封装函数

    这里给大家推荐一款自己封装的js时间日期格式化的函数,非常的简洁实用,分享给有需要的小伙伴
    2014-12-12
  • js canvas实现随机粒子特效

    js canvas实现随机粒子特效

    这篇文章主要为大家详细介绍了js canvas随机粒子特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • jQuery实现可收缩展开的级联菜单实例代码

    jQuery实现可收缩展开的级联菜单实例代码

    这篇文章主要是对利用jQuery实现可收缩展开的级联菜单的实例代码进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • 基于BootStrap的文本编辑器组件Summernote

    基于BootStrap的文本编辑器组件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器。这篇文章主要介绍了基于BootStrap的文本编辑器组件Summernote的相关资料,需要的朋友可以参考下
    2017-10-10
  • javascript运动详解

    javascript运动详解

    本文给大家详细介绍下如何使用javascript来实现运动效果,总结的十分全面,附上各种效果的详细示例和演示图,有需要的小伙伴可以参考下。
    2015-07-07
  • JavaScript使用delete删除数组元素用法示例【数组长度不变】

    JavaScript使用delete删除数组元素用法示例【数组长度不变】

    这篇文章主要介绍了JavaScript使用delete删除数组元素用法,结合实例形式分析了delete删除数组元素的具体用法与注意事项,需要的朋友可以参考下
    2017-01-01
  • js传中文参数controller里获取参数乱码问题解决方法

    js传中文参数controller里获取参数乱码问题解决方法

    js传中文参数,在controller里获取参数乱码的问题在本文有个不错的解决方法,感兴趣的朋友可以参考下
    2014-01-01
  • JS异步错误捕获的一些事小结

    JS异步错误捕获的一些事小结

    这篇文章主要给大家介绍了关于JS异步错误捕获的一些事,文中通过示例代码介绍的非常详细,对大家学习或者使用Javascript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04
  • JavaScript 回车 焦点切换

    JavaScript 回车 焦点切换

    回车键按下时,自动以Tab键方式在文本输入框之间进行焦点切换的JavaScript代码
    2009-06-06
  • JavaScript中set与get方法用法示例

    JavaScript中set与get方法用法示例

    这篇文章主要介绍了JavaScript中set与get方法用法,简单描述了set与get方法的功能,并结合实例形式分析了set与get方法的具体使用技巧,需要的朋友可以参考下
    2018-08-08

最新评论