vueプロジェクトでaxiosアップロードファイルを使用して進捗状況を表示

ファイルのアップロード:
            
                {{filename}}
+ファイルアップロードを選択+
                @change="upload" multiple="multiple" />
            
           
 
アップロードの進行状況:
            
                
                {{(uploadRate*100).toFixed(2)}}%
            
   data() {
            return {               uploadRate: 0,
               filename: '',
               uploadStyle: {
                   width: '0%'
               }
     }
}
 
 
methods: {
             upload: function (e) {
                  var vm = this;
                   var formData = new FormData();
                   formData.append("name", "Alax");
                   for (var i = 0; i 
                       var file = e.target.files[i];//1ファイル目を取る
                       formData.append("file", file);
                       vm.filename = file.name;
                       console.log(file);
                   }
 
                   var config = {
                       headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress:function(e){//アップロード中にこの関数をトリガーしてアップロードの進捗を計算
                           console.log(e)
//属性lengthComputableは主に全部で完成しなければならない仕事量と完成した仕事が測定できるかどうかを示している.
//lengthComputableがfalseの場合、e.totalとe.loadedは取得できません
                           if (e.lengthComputable) {
                               var rate = vm.uploadRate = e.loaded / e.total;//アップロードされた割合totalzは、アップロードされたコンテンツの合計大文字です.loadedは現在アップロードされているコンテンツの大学です
                               if (rate 
//ここの進捗は、ファイルがバックグラウンドにアップロードされたことを示すだけですが、バックグラウンドが処理されているかどうかは分かりません
//だから100%に直接表示することはできません.そうしないと、ユーザーはアップロードが完了したと勘違いし、ブラウザをオフにするとアップロードに失敗する可能性があります
//応答が戻ってきたら、進捗を100%にする
                                   vm.uploadRate = rate;
                                   vm.uploadStyle.width = (rate *100).toFixed(2)+ '%';
                               }
                           }
                       }
                   };
                   axios.post("/resource/microvideoupload", formData, config)
                       .then(function (data) {
                           console.log(data);
                           var json = data.data;//バックグラウンドから実際に戻った結果
                           if (json.result) {
                               vm.uploadRate = 1;
                               vm.uploadStyle.width = '100.00%';//onuploadprogressイベントでアップロードが100%と表示されるのは正確ではありません.必ず応答が戻ってから100%が完了したと判断しなければなりません.そうしないと、ユーザーがブラウザを閉じたら、アップロードに失敗します.あるいは他のロジックがある場合、この時点でコミットすると、バックグラウンドにアップロードされたファイルのパスが見つからないなどの問題が発生します.
                           } else {
                               alert(json.msg);
                           }
                       })
                       .catch(function (err) {
                           console.log(err);
                       });  
             },
}