react 如何实现上传图片

2026-03-10 17:02:57React

实现图片上传的基本步骤

使用React实现图片上传通常需要结合HTML的<input type="file">元素和JavaScript的File API。以下是核心实现方法：

创建一个受控的文件输入组件：

function ImageUpload() {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleFileChange} />
    </div>
  );
}

预览上传的图片

在文件选择后显示预览图：

const [preview, setPreview] = useState('');

useEffect(() => {
  if (!selectedFile) return;

  const objectUrl = URL.createObjectURL(selectedFile);
  setPreview(objectUrl);

  return () => URL.revokeObjectURL(objectUrl);
}, [selectedFile]);

return (
  <div>
    <input type="file" onChange={handleFileChange} />
    {preview && <img src={preview} alt="Preview" style={{maxWidth: '200px'}} />}
  </div>
);

上传到服务器

使用FormData和fetch API发送到后端：

const handleUpload = async () => {
  if (!selectedFile) return;

  const formData = new FormData();
  formData.append('image', selectedFile);

  try {
    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData
    });
    const data = await response.json();
    console.log('Upload success:', data);
  } catch (error) {
    console.error('Upload error:', error);
  }
};

使用第三方库

对于更复杂的需求，可以考虑以下库：

react-dropzone：提供拖放上传功能
react-file-picker：提供更丰富的UI组件
axios：替代fetch进行HTTP请求

示例使用react-dropzone：

import {useDropzone} from 'react-dropzone';

function DropzoneUpload() {
  const {acceptedFiles, getRootProps, getInputProps} = useDropzone({
    accept: 'image/*'
  });

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <p>拖放图片到这里，或点击选择文件</p>
    </div>
  );
}

验证和限制

添加文件验证逻辑：

const handleFileChange = (event) => {
  const file = event.target.files[0];
  if (!file) return;

  // 检查文件类型
  if (!file.type.match('image.*')) {
    alert('请选择图片文件');
    return;
  }

  // 检查文件大小 (2MB)
  if (file.size > 2 * 1024 * 1024) {
    alert('文件大小不能超过2MB');
    return;
  }

  setSelectedFile(file);
};

进度显示

对于大文件上传，显示上传进度：

react 如何实现上传图片

const [progress, setProgress] = useState(0);

const handleUpload = () => {
  const xhr = new XMLHttpRequest();
  xhr.upload.addEventListener('progress', (event) => {
    if (event.lengthComputable) {
      setProgress(Math.round((event.loaded / event.total) * 100));
    }
  });

  xhr.open('POST', '/api/upload');
  const formData = new FormData();
  formData.append('image', selectedFile);
  xhr.send(formData);
};

return (
  <div>
    <progress value={progress} max="100" />
    {progress}%
  </div>
);