超级代理文件上传的进度条 [英] Progress bar for superagent file upload

问题描述

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

I am using the following codes to upload files. File would be sent through superagent in blob format, convert it to dataURI when reaches server and save into 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);
  });
});

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

File upload works but the progress bar is not populated correctly.

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

As per the screenshot, you can see that the ProgressEvent upload percentage ended very fast at 100%, due to both frontend and backend hosted in a same server.

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

The upload progress continued in the background but the direction became "download" instead of "upload" from 14:14:08 to 14:14:14 and completed with a response.

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

I could not calculate the progress based on "total - loaded" too, because during the "download" progress, the total is 0.

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

Tried replacing superagent with axios and hit the same problem.

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的过程吗?

How could I build a progress bar out of it? Can I conclude that the "upload" is the process of uploading to the server, while "download" is the process of uploading to AWS?

推荐答案

今天遇到了这个问题(所以我正在写这个话题...)文档 https://visionmedia.github.io/superagent/ 明确指出，

today I met this problem(so I'm writing in this topic...) Docs https://visionmedia.github.io/superagent/ clearly says, that

事件是方向:上传"或下载"

event is direction: "upload" or "download"

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

So IMHO you have to do something like:

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

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

and it works so can setState() for progress bar here. It's very dummy, but well. https://visionmedia.github.io/superagent/docs/test.html also here they are using this. Does anyone has better idea for this?

这篇关于超级代理文件上传的进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！