react如何上传本地图片

2026-01-25 23:13:41React

上传本地图片的实现方法

在React中上传本地图片通常涉及文件输入处理、预览展示以及上传逻辑。以下是具体实现步骤：

创建文件输入组件

使用HTML的<input type="file">元素允许用户选择本地文件。通过React的状态管理捕获文件对象：

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

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

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

实现图片预览

通过URL.createObjectURL()生成临时URL用于预览选中的图片：

const [previewUrl, setPreviewUrl] = useState('');

useEffect(() => {
  if (!selectedFile) return;
  const objectUrl = URL.createObjectURL(selectedFile);
  setPreviewUrl(objectUrl);
  return () => URL.revokeObjectURL(objectUrl); // 清理内存
}, [selectedFile]);

return (
  <div>
    <input type="file" onChange={handleFileChange} />
    {previewUrl && <img src={previewUrl} alt="Preview" width="200" />}
  </div>
);

处理文件上传

使用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 result = await response.json();
    console.log('Upload success:', result);
  } catch (error) {
    console.error('Upload error:', error);
  }
};

添加拖放上传功能（可选）

通过onDrop事件实现拖放上传体验：

react如何上传本地图片

const handleDrop = (event) => {
  event.preventDefault();
  const file = event.dataTransfer.files[0];
  if (file && file.type.startsWith('image/')) {
    setSelectedFile(file);
  }
};

return (
  <div 
    onDrop={handleDrop}
    onDragOver={(e) => e.preventDefault()}
    style={{ border: '2px dashed #ccc', padding: '20px' }}
  >
    Drag and drop an image here
  </div>
);