REACT-多个下载的单个进度栏

发布于 2025-02-12 19:00:43 字数 733 浏览 1 评论 0原文

我想同时下载文件，但我想获得进度单个进度栏中的下载。

我已经有了下载资产的代码，只需要最好的方法来表示它即可。

Promise.all(arr.map((endpoint) => axiosInstance.get(endpoint.url,{
onDownloadProgress: (progressEvent) =>{
  let percentCompleted = Math.round(progressEvent.loaded * 100 / 
  progressEvent.total);
  console.log(progressEvent.lengthComputable);
  console.log("progress completed : " + percentCompleted);
},
responseType:"arraybuffer",
headers: {
  'Content-Type': 'application/json',
}
}))

编辑：

接受的答案对我有所帮助，现在我有了一个进度标准，同时下载的百分比

原文

I want to download files simultaneously, but I want to get the progress
of the download in a single progress bar.

I already have the code to download the assets, just need the best way to represent it.

Promise.all(arr.map((endpoint) => axiosInstance.get(endpoint.url,{
onDownloadProgress: (progressEvent) =>{
  let percentCompleted = Math.round(progressEvent.loaded * 100 / 
  progressEvent.total);
  console.log(progressEvent.lengthComputable);
  console.log("progress completed : " + percentCompleted);
},
responseType:"arraybuffer",
headers: {
  'Content-Type': 'application/json',
}
}))

Edit:

The accepted answear helped me and now I have a progress bar with the percentage of all downloads simultaneously

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

并安 2025-02-19 19:00:43

经过一番挖掘，我发现了以下内容：

let progress = 0;
const arr = [...]; // <request_1>, <request_2>, ...<request_n>
const arrLen = arr.length;

Promise.all(
  arr.map((endpoint) => {
    let previous = 0;

    return axios.get(endpoint, {
      onDownloadProgress: (progressEvent) => {
        const current = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total / arrLen
        );

        progress += current - previous;
        console.log(progress);

        previous = current;
      },
      responseType: "arraybuffer",
      headers: {
        "Content-Type": "application/json",
      },
    });
  })
);

ps：这是一个快速解决方案。

资源

progress bar，该请求具有完成阶段。有可能吗？

After a little bit of digging, I found this:

let progress = 0;
const arr = [...]; // <request_1>, <request_2>, ...<request_n>
const arrLen = arr.length;

Promise.all(
  arr.map((endpoint) => {
    let previous = 0;

    return axios.get(endpoint, {
      onDownloadProgress: (progressEvent) => {
        const current = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total / arrLen
        );

        progress += current - previous;
        console.log(progress);

        previous = current;
      },
      responseType: "arraybuffer",
      headers: {
        "Content-Type": "application/json",
      },
    });
  })
);

P.S: This is a quick solution.