React上传＆＃x2B; 5000文件 - 无法加载资源：NET :: ERR_INSUFFIFIED_RESOURCES

Question

我正在使用Dropzone和React构建上传文件功能，我的问题是该应用程序应该支持数千张图像，一旦我得到大约1500张图像，它就会崩溃并停止发送请求，然后在浏览器中，我遇到了这个问题：

Failed to load resource: net::ERR_INSUFFICIENT_RESOURCES

我看到了一些解决方案以创建批处理，但老实说不知道如何创建它，因为我使用async函数一个一个一个一个一个一个一个，这是我的代码：

const Dropzone =  ({stateChanger, folder, props, ...rest}) => {
  let container;
  async function asyncForEach(array, callback) {
    for (let index = 0; index < array.length; index++) {
      await callback(array[index], index, array);
    }
  }

  let { id } = useParams();
  const [files, setFiles] = useState([]);
  const {getRootProps, getInputProps} = useDropzone({    
    onDrop: async acceptedFiles => {
      
      stateChanger(true)

      setFiles(acceptedFiles.map(file => Object.assign(file, {
        preview: URL.createObjectURL(file),
        uid: uuidv4()
      })));

      
      const url = `${API_URL}/projects/upload`;

      let requestArr = [];

      await asyncForEach(acceptedFiles, async (file) => {
        console.log('file',file)
        var formData = new FormData();
            formData.append('file', file);
            formData.append('projectId', id);
            formData.append('rootfolder', folder);
            console.log('formData',formData)
          requestArr.push(
              axios
                  .post(url,formData)
                  .then((rst) => {
                    console.log('rst',rst) 
                    var elem = document.getElementById(file.uid);
                    var html = elem.innerHTML;
                    elem.innerHTML = `<span class="upload-success" >Uploaded</span>`;
                  })
                  .catch((error) => { 
                    console.log('error', error);
                    var elem = document.getElementById(file.uid);
                    var html = elem.innerHTML;
                    elem.innerHTML = `<span class="upload-error" >Error uploading</span>`;
                  })
          );
      });

      Promise.all(requestArr).then(() => {
        console.log('resolved promise.all')
        stateChanger(false)
      });      

    }
  });
  
  const thumbs = files.map(file => (
    <div className="thumb" key={file.name}>
      <div className="thumbList">
      
        {file.path} - {file.size} bytes - <span id={file.uid}><span className="upload-pending" >Uploading</span></span>
      
      </div>
    </div>
  ));

  useEffect(() => {
    // Make sure to revoke the data uris to avoid memory leaks
    files.forEach(file => URL.revokeObjectURL(file.preview));
  }, [files]);

  return (
    <section className="container">
      <ToastContainer
        ref={ref => container = ref}
        className="toast-top-right"
      />
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} />
        <img src={uploadImage} />
        <br />
        <p>Drag and drop your files, or click the button to upload</p>
        <button className="btn primary-btn-active width50">Upload from computer</button>
      </div>
      <aside >
        {thumbs}
      </aside>
    </section>
  );
}

export default Dropzone

并且实现非常标准：

<Dropzone stateChanger={setNextDisable} folder={folder} />

有什么建议吗？

Answer 1

您为什么一次需要1500个图像？
用户可以一次只能在屏幕上专注于这么多 - 然后您的滚动条有效但不理想。
在许多地方的解决方案是一次将其分页（10、20、50）在屏幕上。
不仅仅是要麻烦 - 作为开发人员，您可能拥有比普通用户更强大的PC-因此，您的大多数用户很可能会遇到更多的瓶颈问题，性能问题。

我认为的解决方案是减少屏幕上的项目数量，因为拥有大量资产和20个项目和用户不能集中精力或不愿意去看或尝试尝试是没有意义的做事。

Answer 2

资源消耗一直是需要研究的问题。大量数据的处理也是一个类似的问题。如果仅上传。包装并在上传前压缩。

Answer 3

这个问题与Dropzone库无关。它只是意味着您的服务器，无论您使用什么，都无法处理此类流量/连接。如果您真的需要，则可能应在错误消息指出的情况下专用更多资源。