当前位置：首页 > React

react实现图片上传

2026-01-27 06:55:31React

实现图片上传功能

在React中实现图片上传功能通常涉及以下几个步骤：

创建上传组件

使用input元素创建文件上传控件，设置type为file并限制接受的类型为图片：

react实现图片上传

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

  return (
    <div>
      <input 
        type="file" 
        accept="image/*"
        onChange={(e) => setSelectedImage(e.target.files[0])}
      />
    </div>
  );
}

预览上传的图片

在图片上传前提供预览功能，使用URL.createObjectURL生成临时URL：

react实现图片上传

{selectedImage && (
  <div>
    <img 
      alt="预览" 
      src={URL.createObjectURL(selectedImage)} 
      style={{ maxWidth: '100%', maxHeight: '200px' }}
    />
    <button onClick={() => setSelectedImage(null)}>移除</button>
  </div>
)}

上传到服务器

使用FormData和fetchAPI将图片发送到服务器：

const handleUpload = async () => {
  const formData = new FormData();
  formData.append('image', selectedImage);

  try {
    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData
    });
    const data = await response.json();
    console.log('上传成功:', data);
  } catch (error) {
    console.error('上传失败:', error);
  }
};

完整组件示例

import { useState } from 'react';

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

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

    setIsUploading(true);
    const formData = new FormData();
    formData.append('image', selectedImage);

    try {
      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData
      });
      const data = await response.json();
      alert('上传成功');
    } catch (error) {
      alert('上传失败');
    } finally {
      setIsUploading(false);
    }
  };

  return (
    <div>
      <h2>图片上传</h2>
      <input
        type="file"
        accept="image/*"
        onChange={(e) => setSelectedImage(e.target.files[0])}
      />

      {selectedImage && (
        <div>
          <img
            alt="预览"
            src={URL.createObjectURL(selectedImage)}
            style={{ maxWidth: '100%', maxHeight: '200px' }}
          />
          <button onClick={() => setSelectedImage(null)}>移除</button>
          <button onClick={handleUpload} disabled={isUploading}>
            {isUploading ? '上传中...' : '上传图片'}
          </button>
        </div>
      )}
    </div>
  );
}

服务器端处理

Node.js Express服务器的示例处理代码：

const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/api/upload', upload.single('image'), (req, res) => {
  if (!req.file) {
    return res.status(400).send('没有上传文件');
  }

  res.json({
    message: '文件上传成功',
    filename: req.file.filename,
    path: req.file.path
  });
});

app.listen(3000, () => console.log('服务器运行中'));