Axios onUploadProgress 只在我的機器上觸發一次

Question

如果我使用這個小提琴https://jsfiddle.net/v70kou59/1/一切正常

(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;
        });
    };
  })();

但是，如果我下載 axios 示例存儲庫並安裝回調函數所需的依賴項，則 onUploadProgress 不再按預期工作。 它只使用“100”觸發 onUploadProgress 一次。 https://github.com/axios/axios/tree/master/examples

這可能是我的節點版本嗎？ 看來一定是我的機器。

Answer 1

我有確切的問題。 原因之一（我就是這種情況）可能是，您的網絡速度太快，無法多次觸發progressEvent 。

要模擬這一點，請在瀏覽器的網絡選項卡上減慢網絡速度。

Slow 3G設置在 Google Chrome/New Edge（開發版）瀏覽器上對我有用。

參考圖片：

PS：我知道現在回答這個為時已晚。 但其他人可能會在他們降落在這里時發現它有幫助。

Answer 2

因為新版本變了。

所以你必須調用progress而不是 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);

        });
    }