在react dropzone上传程序的网格中设置图像

npm install react-dropzone

import React, { useState } from 'react';
import { useDropzone } from 'react-dropzone';

const ImageGridUploader = () => {
  const [images, setImages] = useState([]);

  const onDrop = (acceptedFiles) => {
    // 处理上传的图像文件
    setImages(acceptedFiles);
  };

  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (
    <div {...getRootProps()} className="image-grid-uploader">
      <input {...getInputProps()} />
      {isDragActive ? (
        <p>将图像文件拖放到此处</p>
      ) : (
        <p>将图像文件拖放到此处，或点击选择文件</p>
      )}
      <div className="image-grid">
        {images.map((image, index) => (
          <div key={index} className="image-item">
            <img src={URL.createObjectURL(image)} alt={`Image ${index}`} />
          </div>
        ))}
      </div>
    </div>
  );
};

export default ImageGridUploader;