superagent文件上传的进度条

Question

我使用以下代码上传文件。文件将以blob格式通过superagent发送，到达服务器时将其转换为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的过程吗？

Answer 1

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

  

事件是方向：＆＃34;上传＆＃34;或＆＃34;下载＆＃34;

所以恕我直言，你必须做类似的事情：

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

它的工作原理可以在这里使用setState（）获取进度条。 它非常虚拟，但很好。 https://visionmedia.github.io/superagent/docs/test.html他们也在这里使用它。 有没有人对此有更好的想法？

Answer 2

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