从前端上传大文件

Question

我试图了解将大文件从前端上传到服务器的最佳方法是什么。对于前端，我使用一个名为的库react-dropzone，它允许我获取我打算上传的文件的信息。我的上传组件看起来像这样：

// Node Modules
import React, {useCallback} from 'react';
import {useDropzone} from 'react-dropzone';
import {useTranslation} from 'react-i18next';

export default function Upload() {
  // i18n
  const [t] = useTranslation();

  // React Dropzone
  const onDrop = useCallback((droppedFiles) => {
    console.log(droppedFiles);
  }, []);
  const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop});

  return (
    <div className="upload" {...getRootProps()}>
      <input {...getInputProps()} />
      {isDragActive ? (
        <p>{t('DROP_FILES_HERE')}</p>
      ) : (
        <p>{t('DRAG_AND_DROP_FILES_HERE_OR_CLICK_TO_SELECT_FILES')}</p>
      )}
    </div>
  );
}

这使我能够访问文件的内容，例如文件的名称、类型和大小（以字节为单位）。 这个库似乎也适用于更大的文件（100+ MB），但我的问题是当我想上传这个数据时如何调用这些数据？

我的一个想法是使用localStorage，但最大大小似乎约为5 到 10 MB。我也在Redux前端使用，但我不认为使用它store对于大文件来说是理想的。

这给我带来了一篇我读过的文章，该文章将文件存储在 React 状态中，但是这个示例似乎使用了较小的文件，例如照片。我的问题是，使用这种方法是否适用于 100 MB 左右的较大文件？

// Node Modules
import React, {useCallback, useState} from 'react';
import {useDropzone} from 'react-dropzone';
import {useTranslation} from 'react-i18next';

export default function Upload() {
  // i18n
  const [t] = useTranslation();
  // State
  const [files, setFiles] = useState();

  // React Dropzone
  const onDrop = useCallback((droppedFiles) => {
    setFiles(droppedFiles);
  }, []);
  const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop});

  return (
    <div className="upload" {...getRootProps()}>
      <input {...getInputProps()} />
      {isDragActive ? (
        <p>{t('DROP_FILES_HERE')}</p>
      ) : (
        <p>{t('DRAG_AND_DROP_FILES_HERE_OR_CLICK_TO_SELECT_FILES')}</p>
      )}
    </div>
  );
}

我计划在上传到服务器时将文件分成较小的部分，Blob但我不熟悉 React 状态的大小限制，所以这是上传较大文件的最佳方法吗？