2

我正在使用以下代码上传文件。文件将通过 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);
  });
});

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

1

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

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

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

2

尝试用 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的过程吗？

4

2 回答 2

1

今天我遇到了这个问题（所以我正在写这个主题......）文档https://visionmedia.github.io/superagent/清楚地说，

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

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

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

它可以工作，因此可以在此处设置进度条的 setState() 。这是非常愚蠢的，但很好。 https://visionmedia.github.io/superagent/docs/test.html他们也在这里使用它。有人对此有更好的主意吗？

于 2017-12-30T01:16:54.110 回答
0

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

于 2020-04-19T15:46:51.030 回答