使用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了,根据自己个性化定制来实现你那完美的需求...

 

 
posted @ 2017-11-02 21:53  刈懋  阅读(16134)  评论(8编辑  收藏  举报