Axios onUploadProgress 在我的机器上只触发一次

Question

如果我使用这个 fiddle 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 示例 repo 并安装必要的依赖项回调函数，onUploadProgress 将不再按预期工作。它只用“100”触发 onUploadProgress 一次。 https://github.com/axios/axios/tree/master/examples

这可能是我的节点版本吗？看来一定是我的机器了

Answer 1

因为新版本改了

所以你必须调用 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);

        });
    }

Answer 2

我遇到了确切的问题。原因之一（我就是这种情况）可能是您的网络太快而无法多次触发 progressEvent。

要模拟这种情况，请在浏览器的“网络”选项卡上降低网络速度。

Slow 3G 设置在 Google Chrome/New Edge（开发版）浏览器上对我有效。

参考图片：

PS：我知道现在回答这个问题已经太晚了。但其他人在登陆这里时可能会发现它有帮助。

Axios onUploadProgress 在我的机器上只触发一次

Axios onUploadProgress only fires once on my machine

javascript

express

reactjs

axios