如何存在多个上传react

2026-03-11 00:28:25React

处理多个文件上传的 React 实现方法

使用 input 元素的 multiple 属性
在 React 中，可以通过设置 <input type="file"> 的 multiple 属性来允许用户选择多个文件。文件列表会存储在 event.target.files 中，这是一个 FileList 对象。

<input 
  type="file" 
  multiple 
  onChange={(e) => {
    const files = Array.from(e.target.files);
    // 处理文件列表
  }}
/>

将 FileList 转换为数组
FileList 是类数组对象，可以通过 Array.from() 或展开运算符转换为数组，便于后续操作（如遍历、过滤等）。

const handleFileChange = (e) => {
  const files = [...e.target.files]; // 或 Array.from(e.target.files)
  files.forEach(file => console.log(file.name));
};

管理上传状态
使用 React 的 useState 存储文件列表，并结合进度跟踪或上传逻辑。例如：

如何存在多个上传react

const [selectedFiles, setSelectedFiles] = useState([]);

const handleUpload = async () => {
  const formData = new FormData();
  selectedFiles.forEach(file => formData.append('files', file));

  try {
    const response = await axios.post('/upload', formData);
    console.log('上传成功', response.data);
  } catch (error) {
    console.error('上传失败', error);
  }
};

显示已选文件信息
在 UI 中展示用户已选择的文件列表，提供删除或预览功能：

{selectedFiles.map((file, index) => (
  <div key={index}>
    <span>{file.name}</span>
    <button onClick={() => removeFile(index)}>删除</button>
  </div>
))}

高级功能扩展

拖拽上传支持
通过 onDrop 事件实现拖拽上传，需阻止默认行为并处理拖入的文件：

如何存在多个上传react

<div 
  onDrop={(e) => {
    e.preventDefault();
    const files = [...e.dataTransfer.files];
    setSelectedFiles(files);
  }}
  onDragOver={(e) => e.preventDefault()}
>
  拖拽文件到此处
</div>

分片上传大文件
对于大文件，可分割为小块上传，提升可靠性和用户体验：

const uploadChunk = async (file, start, end) => {
  const chunk = file.slice(start, end);
  const formData = new FormData();
  formData.append('chunk', chunk);
  await axios.post('/upload-chunk', formData);
};

第三方库推荐
若需更复杂的功能（如进度条、自动重试），可使用以下库：