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

Mic*_*ova 7 javascript express reactjs axios

如果我使用这个小提琴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;
        });
    };
  })();
Run Code Online (Sandbox Code Playgroud)

但是,如果我下载 axios 示例存储库并安装回调函数所需的依赖项,则 onUploadProgress 不再按预期工作。它只使用“100”触发 onUploadProgress 一次。 https://github.com/axios/axios/tree/master/examples

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

Tej*_*jas 9

我有确切的问题。原因之一(我的情况就是如此)可能是,您的网络太快而无法触发progressEvent多次。

要模拟此情况,请在浏览器的“网络”选项卡上减慢网络速度。

Slow 3G设置在 Google Chrome/New Edge(开发版本)浏览器上对我有用。

参考图片:

在此输入图像描述

PS:我知道现在回答这个问题已经太晚了。但其他人抵达这里后可能会发现这很有帮助。