react实现图片选择

实现图片选择的基本方法

在React中实现图片选择功能，通常需要使用HTML的<input type="file">元素，并结合React的状态管理来处理用户选择的图片文件。

import { useState } from 'react';

function ImageUploader() {
  const [selectedImage, setSelectedImage] = useState(null);

  const handleImageChange = (e) => {
    if (e.target.files && e.target.files[0]) {
      setSelectedImage(URL.createObjectURL(e.target.files[0]));
    }
  };

  return (
    <div>
      <input 
        type="file" 
        accept="image/*" 
        onChange={handleImageChange}
      />
      {selectedImage && (
        <div>
          <img 
            src={selectedImage} 
            alt="Selected" 
            style={{ maxWidth: '100%', maxHeight: '200px' }} 
          />
        </div>
      )}
    </div>
  );
}

添加多图片选择支持

如果需要支持多图片选择，可以修改代码以处理多个文件：

function MultipleImageUploader() {
  const [selectedImages, setSelectedImages] = useState([]);

  const handleImageChange = (e) => {
    if (e.target.files) {
      const filesArray = Array.from(e.target.files).map(file => 
        URL.createObjectURL(file)
      );
      setSelectedImages(filesArray);
    }
  };

  return (
    <div>
      <input 
        type="file" 
        multiple
        accept="image/*" 
        onChange={handleImageChange}
      />
      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
        {selectedImages.map((image, index) => (
          <div key={index} style={{ margin: '10px' }}>
            <img 
              src={image} 
              alt={`Selected ${index}`} 
              style={{ width: '100px', height: '100px', objectFit: 'cover' }}
            />
          </div>
        ))}
      </div>
    </div>
  );
}

添加图片预览和删除功能

为了提升用户体验，可以添加图片预览和删除功能：

function ImageUploaderWithPreview() {
  const [images, setImages] = useState([]);

  const handleImageChange = (e) => {
    if (e.target.files) {
      const filesArray = Array.from(e.target.files).map(file => ({
        url: URL.createObjectURL(file),
        file
      }));
      setImages(prev => [...prev, ...filesArray]);
    }
  };

  const removeImage = (index) => {
    setImages(prev => prev.filter((_, i) => i !== index));
  };

  return (
    <div>
      <input 
        type="file" 
        multiple
        accept="image/*" 
        onChange={handleImageChange}
      />
      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
        {images.map((image, index) => (
          <div key={index} style={{ margin: '10px', position: 'relative' }}>
            <img 
              src={image.url} 
              alt={`Selected ${index}`} 
              style={{ width: '100px', height: '100px', objectFit: 'cover' }}
            />
            <button 
              onClick={() => removeImage(index)}
              style={{ position: 'absolute', top: 0, right: 0 }}
            >
              ×
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

使用第三方库简化实现

对于更复杂的需求，可以考虑使用第三方库如react-dropzone：

import { useDropzone } from 'react-dropzone';

function DropzoneImageUploader() {
  const [files, setFiles] = useState([]);

  const { getRootProps, getInputProps } = useDropzone({
    accept: 'image/*',
    onDrop: acceptedFiles => {
      setFiles(acceptedFiles.map(file => Object.assign(file, {
        preview: URL.createObjectURL(file)
      })));
    }
  });

  const thumbs = files.map(file => (
    <div key={file.name}>
      <img
        src={file.preview}
        alt={file.name}
        style={{ width: '100px', height: '100px' }}
      />
    </div>
  ));

  return (
    <div>
      <div {...getRootProps()} style={{ border: '1px dashed', padding: '20px' }}>
        <input {...getInputProps()} />
        <p>拖拽图片到这里，或点击选择</p>
      </div>
      <div>{thumbs}</div>
    </div>
  );
}

处理大文件上传

对于大文件上传，可能需要添加文件大小限制和上传进度显示：

function ImageUploaderWithSizeLimit() {
  const [file, setFile] = useState(null);
  const [error, setError] = useState('');

  const handleImageChange = (e) => {
    const selectedFile = e.target.files[0];
    if (selectedFile) {
      if (selectedFile.size > 5 * 1024 * 1024) { // 5MB限制
        setError('文件大小不能超过5MB');
        setFile(null);
      } else {
        setError('');
        setFile(URL.createObjectURL(selectedFile));
      }
    }
  };

  return (
    <div>
      <input 
        type="file" 
        accept="image/*" 
        onChange={handleImageChange}
      />
      {error && <div style={{ color: 'red' }}>{error}</div>}
      {file && (
        <img 
          src={file} 
          alt="Selected" 
          style={{ maxWidth: '100%', maxHeight: '200px' }} 
        />
      )}
    </div>
  );
}

这些方法涵盖了从基础到进阶的React图片选择实现，可以根据项目需求选择合适的方案。