react如何上传图片

上传图片的基本方法

在React中上传图片通常涉及前端表单处理、文件选择以及后端API交互。以下是实现步骤：

创建文件输入组件 使用HTML的<input type="file">元素，通过React的onChange事件获取文件对象：

function ImageUpload() {
  const handleFileChange = (e) => {
    const file = e.target.files[0];
    console.log(file); // 获取到的File对象
  };

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

预览图片 通过URL.createObjectURL()生成临时URL实现本地预览：

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

const handleFileChange = (e) => {
  const file = e.target.files[0];
  setPreview(URL.createObjectURL(file));
};

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

上传到服务器

使用FormData发送文件 通过fetch或axios将文件发送到后端API：

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

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

处理多文件上传 通过multiple属性支持多选，遍历files数组：

<input type="file" multiple onChange={handleFilesChange} />

const handleFilesChange = (e) => {
  Array.from(e.target.files).forEach(file => {
    uploadImage(file);
  });
};

第三方库方案

使用react-dropzone 安装库后实现拖拽上传功能：

npm install react-dropzone

import { useDropzone } from 'react-dropzone';

function DropzoneUpload() {
  const { getRootProps, getInputProps } = useDropzone({
    accept: 'image/*',
    onDrop: acceptedFiles => {
      uploadImage(acceptedFiles[0]);
    }
  });

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <p>拖拽图片到此处或点击选择</p>
    </div>
  );
}

注意事项

• 上传前应验证文件类型和大小：

  if (!file.type.startsWith('image/')) {
  alert('请选择图片文件');
  return;
  }
  if (file.size > 5 * 1024 * 1024) {
  alert('文件大小不能超过5MB');
  return;
  }

• 清理对象URL避免内存泄漏：

  useEffect(() => {
  return () => {
    if (preview) URL.revokeObjectURL(preview);
  };
  }, [preview]);

• 后端需配置接收multipart/form-data格式的请求，常见框架如Express需使用multer中间件处理文件上传。