使用axios实现上传视频进度条

这是最终的效果图

 

先介绍一下axios的使用：中文的axios官方介绍

 

首先定义一个uploadTest方法,写在vue文件的methods里

该方法有三个参数，分别是参数，和两个回调函数，参数就是我们要上传图片的需要的额参数；而第一个回调函数，是获取上传进度包含的数据，第二回调是获取上传成功失败，后台返回的数据；来进行页面的下一步操作。

uploadTest(formData,callback1,callback2){
      this.axios({
        url:url_pref+'/file/upload',
        method:'post',
        headers: {
          'token': this.$store.state.UserMod.token
　　　　　　},
        onUploadProgress:function(progressEvent){ //原生获取上传进度的事件
          if(progressEvent.lengthComputable){
            //属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
            //如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded
            callback1(progressEvent);
          }
        },
        data:formData
      }).then(res =>{
        callback2(res);
      }).catch(function (error) {
        console.log(error)
        this.$notify.error({
          title: '错误',
          message: '上传文件失败！'
        })
      })
    },

然后在页面<el-upload></el-upload>中使用el-process组件

 <div v-else-if="this.isPreview==false" style="width: 261px;position: relative;top: 208px;left: 145px;" class="add-micro-process">
      <el-progress :percentage=this.percentage stroke-width="10" :show-text=false color="#FF9012" ></el-progress><br/>
      <span style="color:#969C99;">{{this.uploadText}}<br>{{this.percentage}}%</span>
 </div>

最后当提交表单时会调用上面的方法

uploadFile(file,me){
      let formData = new FormData();
      formData.append('uploadFile', file.file);
      formData.append('key', me.uploadInfo['dir'] + me.random_string(10) + me.suffix)
      formData.append('policy',me.uploadInfo['policy'])
      formData.append('OSSAccessKeyId',me.uploadInfo['accessid'])
      formData.append('success_action_status',200)
      formData.append('callback',me.uploadInfo['callback'])
      formData.append('signature',me.uploadInfo['signature'])

      me.uploadTest(formData,(res) =>{
        let loaded = res.loaded, total = res.total;
        this.$nextTick(() =>{
          this.percentage = Math.ceil((loaded/total) * 100);
          }
        )
      }, (res) =>{
          if(res.status === 200){
            me.downloadUrl = res.data['downloadUrl']//fileDownloadUri
            this.isPreview=true
            me.$notify({
              title: '成功',
              message: `上传文件成功！`,
              type: 'success'
            })
          }
      }
      )},

完成！