寻求具备多图上传、预览等功能的React浏览器端图片上传组件

Great question! For a React browser app needing multi-image upload, thumbnail previews, and mobile camera access, here are my top recommendations—both ready-to-use libraries and a custom implementation if you want full control:

react-dropzone (Flexible & Highly Customizable) #

This is the go-to library for most React file upload needs—it's lightweight, well-maintained, and plays seamlessly with mobile camera access.

Key Features That Match Your Needs: #

• Supports multi-file upload out of the box
• Easy to generate thumbnail previews for selected images
• Works with mobile camera: Just configure the input to accept image types and enable capture.

Basic Example: #

First, install it:

npm install react-dropzone

Then, a component implementation:

import { useDropzone } from 'react-dropzone';

const ImageUploader = () => {
  const { acceptedFiles, getRootProps, getInputProps } = useDropzone({
    accept: { 'image/*': [] },
    multiple: true,
    // Enable camera capture on mobile (use 'user' for front camera)
    capture: 'environment'
  });

  const imagePreviews = acceptedFiles.map(file => (
    <div key={file.name} style={{ margin: '10px', display: 'inline-block' }}>
      <img
        src={URL.createObjectURL(file)}
        alt={file.name}
        style={{ width: '150px', height: '150px', objectFit: 'cover' }}
      />
      <p>{file.name}</p>
    </div>
  ));

  return (
    <div {...getRootProps({ className: 'dropzone' })}>
      <input {...getInputProps()} />
      <p>Drag & drop images here, or click to select files (including camera on mobile)</p>
      <div>{imagePreviews}</div>
    </div>
  );
};

export default ImageUploader;

react-images-upload (Simpler, Out-of-the-Box) #

If you want a more opinionated, pre-built component with minimal setup, this library is a solid choice. It includes built-in preview thumbnails, delete buttons, and automatic mobile camera integration.

Key Features: #

• Multi-image upload
• Built-in thumbnail previews with delete option
• Mobile camera support (auto-detects mobile devices)

Basic Example: #

Install first:

npm install react-images-upload

Component code:

import ImageUploader from 'react-images-upload';

const SimpleImageUploader = () => {
  const handleUpload = (files) => {
    // Handle file upload logic here (e.g., send to your API)
    console.log('Selected files:', files);
  };

  return (
    <ImageUploader
      withIcon={true}
      buttonText='Choose images'
      onChange={handleUpload}
      imgExtension={['.jpg', '.gif', '.png', '.jpeg']}
      maxFileSize={5242880} // 5MB file size limit
      multiple={true}
      capture={true} // Enables camera access on mobile
    />
  );
};

export default SimpleImageUploader;

Custom Implementation (Full Control) #

If you prefer avoiding external libraries, here's a bare-bones custom component that checks all your boxes:

import { useState } from 'react';

const CustomImageUploader = () => {
  const [selectedFiles, setSelectedFiles] = useState([]);

  const handleFileChange = (e) => {
    const files = Array.from(e.target.files);
    // Generate previews for each selected file
    const previewFiles = files.map(file => ({
      ...file,
      preview: URL.createObjectURL(file)
    }));
    setSelectedFiles(prev => [...prev, ...previewFiles]);
  };

  const removeFile = (index) => {
    const updatedFiles = [...selectedFiles];
    // Revoke object URL to free up memory
    URL.revokeObjectURL(updatedFiles[index].preview);
    updatedFiles.splice(index, 1);
    setSelectedFiles(updatedFiles);
  };

  return (
    <div>
      <input
        type="file"
        accept="image/*"
        multiple
        capture="environment" // Enable rear camera on mobile
        onChange={handleFileChange}
        style={{ marginBottom: '10px' }}
      />
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
        {selectedFiles.map((file, index) => (
          <div key={index} style={{ position: 'relative' }}>
            <img
              src={file.preview}
              alt={`Preview ${index}`}
              style={{ width: '150px', height: '150px', objectFit: 'cover' }}
            />
            <button
              onClick={() => removeFile(index)}
              style={{
                position: 'absolute',
                top: '5px',
                right: '5px',
                background: 'rgba(0,0,0,0.7)',
                color: 'white',
                border: 'none',
                borderRadius: '50%',
                width: '25px',
                height: '25px',
                cursor: 'pointer'
              }}
            >
              ×
            </button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default CustomImageUploader;

Quick Tips: #

• Always use URL.revokeObjectURL() to clean up preview URLs when they're no longer needed to avoid memory leaks.
• Add validation for file types, sizes, and maximum upload count to fit your app's requirements.
• To upload files to a server, use FormData with a fetch or axios call to send the files to your backend API.

内容的提问来源于stack exchange，提问作者Dónal