时间戳

首页 > 解决方案 > 如何在 React 中设置文件上传延迟？

reactjs - 如何在 React 中设置文件上传延迟？

问题描述

我想批量上传记录，这样我就不会产生服务器问题。我希望能够一次推送 10 条记录，每五秒一次，只是为了暂时证明这个概念。我已经在我的代码中放置了 setInterval 函数，但无法让它在正确的时间运行。我已经在这几天了，但无法弄清楚。

chunkData(data) {
    const maxRecords = 10;
    const loops = (data.length % maxRecords > 0) ? Math.floor(data.length / maxRecords) + 1 : data.length / maxRecords;
    //console.log('data: ', data);
    //console.log('loops: ', loops);

    //setInterval(() => {
        for (let loop = 0; loop < loops; loop++) {
        console.log('loop: ', loop);
        let start = loop * maxRecords;
        //setInterval(() => {
          for (let batch = start; batch < start + maxRecords; batch++) {
            // the line below will become the upload function once I get this to work
            if (data[batch] !== undefined) console.log('data[batch]: ', data[batch]);
          }
          //start = start + 10;
        //}, 5000);
      }
    //}, 5000);
  }

我确定这是我需要的一个简单的调整，但我现在对如何实现它一无所知。任何建议将不胜感激。

标签： reactjsuploadsetinterval

解决方案

您必须弄清楚的更大问题是，在这种情况下，客户端更改将无济于事。如果您尝试以这种方式帮助您的服务器，当有超过 1 个并发用户上传时会发生什么？2？3? 100？1000？此解决方案不可扩展。您最终（或很快）必须确保您的服务器足够强大以处理上传流量。

至于你的具体代码。您的问题是您在 for 循环中使用setInterval但使用相同的值。请记住，上传（或任何 XHR/fetch 请求）是一个异步操作。现在，您将间隔设置为基本同时运行。

要获得上传之间的实际间隔，您需要这样的东西：

for (let loop = 0; loop < loops; loop++) {
        console.log('loop: ', loop);
        let start = loop * maxRecords;
        
          for (let i=1, batch = start; batch < start + maxRecords; i++, batch++) {
            // the line below will become the upload function once I get this to work
            if (data[batch] !== undefined) {
              
              setInterval(() => {
                //make upload request here
              }, (loop + 1) * i * 5000);
            }
          }                  
      }

我不确定你的“开始”变量应该是什么。

无论如何，这段代码真的很容易出错并且很脆弱。我真的建议重新考虑您的方法并考虑修复您的服务器端。

如果您仍然希望使用此客户端 hack，即使没有，并且您正在寻找更稳定的客户端解决方案。我建议使用react-uploady。它会为您处理上传以及在 React 中管理上传所带来的所有边缘情况。

您甚至可以轻松地进行间隔：

import ChunkedUploady, { useChunkStartListener } from "@rpldy/chunked-uploady";
import UploadButton from "@rpldy/upload-button";

const CHUNK_SIZE = 1e+6;

const UploadButtonDelayedChunks = () => {
    useChunkStartListener(() => new Promise((resolve) => {
        //delays chunk upload by 5 seconds
        setTimeout(resolve, 5000);
    }));
    
    return <UploadButton/>;
};


export const ChunkedExample = () => {
    return (
      <ChunkedUploady
        destination={{ url: "https://my-server/upload" }}        
        chunkSize={CHUNK_SIZE}>
        <UploadButtonDelayedChunks/>
      </ChunkedUploady>
    );
};

推荐阅读