使用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' }) } } )},

完成！