react如何上传图片

2026-01-15 09:17:19React

使用input标签上传图片

在React中可以通过HTML的<input type="file">元素实现图片上传功能。创建一个受控组件来管理文件选择状态：

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

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

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleFileChange} />
      {selectedFile && (
        <div>
          <p>文件名: {selectedFile.name}</p>
          <p>文件类型: {selectedFile.type}</p>
          <p>文件大小: {selectedFile.size} bytes</p>
        </div>
      )}
    </div>
  );
}

预览选择的图片

使用URL.createObjectURL()可以生成临时URL用于图片预览：

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

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

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

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

return (
  {preview && <img src={preview} alt="预览" width="200" />}
)

上传到服务器

通过FormData对象将文件发送到后端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('上传成功:', data);
  } catch (error) {
    console.error('上传失败:', error);
  }
};

使用第三方库

对于更复杂的需求，可以考虑使用专门的文件上传库：

npm install react-dropzone

import { useDropzone } from 'react-dropzone';

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

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

图片压缩处理

在上传前可以使用浏览器端库进行图片压缩：

react如何上传图片

npm install browser-image-compression

import imageCompression from 'browser-image-compression';

const compressImage = async (file) => {
  const options = {
    maxSizeMB: 1,
    maxWidthOrHeight: 1920,
    useWebWorker: true
  };

  try {
    return await imageCompression(file, options);
  } catch (error) {
    console.log(error);
    return file;
  }
};