Axios onUploadProgress仅在我的机器上触发一次 [英] Axios onUploadProgress only fires once on my machine

问题描述

如果我使用这个小提琴

所以你必须调用 progress 而不是onUploadProgress

 静态uploadImageFile（authId，userinfo，file，callback）{
 let url = AppConfig.domain +'/ api / CoreUploads / uploadImg'; 
 let formData = new FormData（）; 
 formData.append（'realm'，userinfo.realm）; 
 formData.append（'fileurl'，`users / $ {userinfo.id} /`）; 
 formData.append（'cropData'，）; 
 formData.append（'autoid'，true）; 
 formData.append（'image'，file）; 
 
返回axios.post（url，formData，{
超时：1000000，
 withCredentials：true，
标题：{
'授权'：authId ，
'Content-type'：'multipart / form-data'
}，
 progress：function（progressEvent）{
 let percentCompleted = Math.round（（progressEvent.loaded） * 100）/ progressEvent.total）; 
回调（percentCompleted）; 
} 
}）。catch（e => {
 console.log（e）; 
 
}）; 
} 
  

If I use this fiddle https://jsfiddle.net/v70kou59/1/ everything works as expected

(function () {
    var output = document.getElementById('output');
    document.getElementById('upload').onclick = function () {
      var data = new FormData();
      data.append('foo', 'bar');
      data.append('file', document.getElementById('file').files[0]);
      var config = {
        onUploadProgress: function(progressEvent) {
          var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
          console.log(percentCompleted)
        }
      };
      axios.put('/upload/server', data, config)
        .then(function (res) {
          output.className = 'container';
          output.innerHTML = res.data;
        })
        .catch(function (err) {
          output.className = 'container text-danger';
          output.innerHTML = err.message;
        });
    };
  })();

But if I download the axios examples repo and install the necessary dependencies the callback function, onUploadProgress no longer works as expected. It only fires onUploadProgress once with "100". https://github.com/axios/axios/tree/master/examples

Could this be my version of node? It seems like it must be my machine.

解决方案

Because the new version changed.

So you have to call progress instead of onUploadProgress

 static uploadImageFile(authId, userinfo, file, callback) {
        let url = AppConfig.domain + '/api/CoreUploads/uploadImg';
        let formData = new FormData();
        formData.append('realm', userinfo.realm);
        formData.append('fileurl', `users/${userinfo.id}/`);
        formData.append('cropData', "");
        formData.append('autoid', true);
        formData.append('image', file);

        return axios.post(url, formData, {
            timeout: 1000000,
            withCredentials: true,
            headers: {
                'Authorization': authId,
                'Content-type': 'multipart/form-data'
            },
            progress: function (progressEvent) {
                let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
                callback(percentCompleted);
            }
        }).catch(e => {
            console.log(e);

        });
    }

这篇关于Axios onUploadProgress仅在我的机器上触发一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！