如何修改React组件代码实现多图片拖拽上传并以数组接收数据？

要让你的组件支持多图片拖拽上传，只需对代码做以下3处修改：

• 将单个文件的状态改为数组，用于存储多个选中的文件
• 给FileUploader组件添加multiple属性，开启多选模式
• 调整handleChange函数，接收并更新文件数组状态

修改后的完整代码 #

import React, { useState } from "react";
import { FileUploader } from "react-drag-drop-files";

const fileTypes = ["JPG", "PNG", "GIF"];

function ImageUpload() {
  // 1. 把单个文件状态改为数组
  const [files, setFiles] = useState([]);
  
  // 2. 处理多选后的文件数组
  const handleChange = (files) => {
    setFiles(files);
  };

  return (
    <div>
      {/* 3. 添加multiple属性开启多选 */}
      <FileUploader 
        handleChange={handleChange} 
        name="file" 
        types={fileTypes} 
        multiple 
      />
      
      {/* 可选：展示已选中的文件列表 */}
      <div style={{ marginTop: '20px' }}>
        <h4>已选中文件：</h4>
        {files.length > 0 ? (
          <ul>
            {files.map((file, index) => (
              <li key={index}>{file.name}</li>
            ))}
          </ul>
        ) : (
          <p>暂无选中文件</p>
        )}
      </div>
    </div>
  );
}

export default ImageUpload;

关键说明 #

• multiple属性是react-drag-drop-files组件支持的扩展属性，开启后允许用户拖拽或选择多个文件
• 开启多选后，handleChange回调会接收一个文件数组而非单个文件，因此需要将状态改为数组类型来存储
• 如果需要支持追加选择（而非替换已选文件），可以把handleChange改成这样：

const handleChange = (newFiles) => {
  setFiles(prevFiles => [...prevFiles, ...newFiles]);
};

内容的提问来源于stack exchange，提问作者Afaq Shahid Khan