超级代理文件上传进度条答案

【问题标题】：Progress bar for superagent file upload超级代理文件上传进度条
【发布时间】：2017-12-27 02:06:11
【问题描述】：

我正在使用以下代码上传文件。文件将通过 superagent 以 blob 格式发送，到达服务器后将其转换为 dataURI 并保存到 AWS S3。

files.forEach((file) => {
  superagent.post('http://localhost:3030/uploads')
  .attach('file', file)
  .on('progress', e => {
    console.log('Percentage done: ', e);
  })
  .end((err, res) => {
    // console.log(err);
    console.log(res);
  });
});

文件上传正常，但进度条未正确填充。

根据屏幕截图，您可以看到 ProgressEvent 上传百分比非常快地以 100% 结束，因为前端和后端托管在同一台服务器中。

上传进度在后台继续，但方向从 14:14:08 到 14:14:14 变为“下载”而不是“上传”，并完成响应。

我也无法根据“总加载”计算进度，因为在“下载”进度期间，总为0。

尝试用 axios 替换 superagent 并遇到同样的问题。

files.forEach((file) => {
  const url = 'http://localhost:3030/uploads';
  const formData = new FormData();
  const config = {
    headers: {
      'content-type': 'multipart/form-data'
    },
    onUploadProgress: e => {
      console.log('Upload: ', e);
    },
    onDownloadProgress: e => {
      console.log('Download: ', e);
    }
  };
  formData.append('file', file);
  axios.post(url, formData, config)
    .then(res => console.log(res))
    .catch(err => console.log(err));
});

我怎样才能建立一个进度条呢？我能不能断定“上传”是上传到服务器的过程，而“下载”是上传到AWS的过程？

【问题讨论】：

你不能用这种方式真正衡量它，也许可以试试 websockets，但在此之前阅读stackoverflow.com/a/48412965/2805357 它应该澄清这里发生了什么。

标签： javascript file-upload progress-bar axios react-dropzone

【解决方案1】：

今天我遇到了这个问题（所以我正在写这个主题......） Docs https://visionmedia.github.io/superagent/ 明确表示，

事件是方向：“上传”或“下载”

所以恕我直言，您必须执行以下操作：

        if(event.direction === "upload")
            console.log(e.direction,"is done",e.percent,"%")})

它可以工作，所以可以在这里设置进度条。这是非常愚蠢的，但很好。 https://visionmedia.github.io/superagent/docs/test.html 他们也在使用这个。有没有人对此有更好的想法？

【讨论】：

这对我来说有点道理，但由于某种原因我只能得到 100%
嗨，差不多 3 年后？ :D 我注意到帖子（不记得在哪里 - 这里或 FB 组），其中 JS 开发人员说没有制作进度条的优雅方法，因此您可以尝试制作自己的包装器。我不再使用JS了，对不起！当然，您可以在此处提供代码示例
我做了更多的研究，似乎上传进度只在节点中起作用，而不是在浏览器中。

【解决方案2】：

我认为没有错误。这就是它的实际构建方式，记住在向服务器发送请求后应该有响应，这就是 download 方向的来源（就像从服务器下载数据作为响应数据一样）。

【讨论】：