当前位置：首页 > React

react实现照片上传

2026-01-27 12:50:04React

实现照片上传的基本步骤

在React中实现照片上传功能通常涉及前端表单处理、文件选择、预览以及后端API交互。以下是具体实现方法：

创建文件上传表单组件

使用HTML的<input type="file">元素配合React的状态管理：

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>
  );
}

添加图片预览功能

通过URL.createObjectURL()实现客户端预览：

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

useEffect(() => {
  if (!selectedFile) return;
  const objectUrl = URL.createObjectURL(selectedFile);
  setPreview(objectUrl);
  return () => URL.revokeObjectURL(objectUrl);
}, [selectedFile]);

return (
  <div>
    {preview && <img src={preview} alt="Preview" style={{maxHeight: 200}} />}
  </div>
);

处理文件上传请求

使用FormData对象配合axios或fetch API发送文件：

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

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

  try {
    const response = await axios.post('/api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });
    console.log('Upload success:', response.data);
  } catch (error) {
    console.error('Upload error:', error);
  }
};

添加文件类型和大小验证

在文件选择时进行验证：

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

  const validTypes = ['image/jpeg', 'image/png'];
  const maxSize = 5 * 1024 * 1024; // 5MB

  if (!validTypes.includes(file.type)) {
    alert('仅支持JPEG/PNG格式');
    return;
  }

  if (file.size > maxSize) {
    alert('文件大小超过5MB限制');
    return;
  }

  setSelectedFile(file);
};

完整组件示例

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function ImageUploader() {
  const [selectedFile, setSelectedFile] = useState(null);
  const [preview, setPreview] = useState('');
  const [uploadProgress, setUploadProgress] = useState(0);

  useEffect(() => {
    if (!selectedFile) return;
    const objectUrl = URL.createObjectURL(selectedFile);
    setPreview(objectUrl);
    return () => URL.revokeObjectURL(objectUrl);
  }, [selectedFile]);

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

    const validTypes = ['image/jpeg', 'image/png'];
    const maxSize = 5 * 1024 * 1024;

    if (!validTypes.includes(file.type)) {
      alert('仅支持JPEG/PNG格式');
      return;
    }

    if (file.size > maxSize) {
      alert('文件大小超过5MB限制');
      return;
    }

    setSelectedFile(file);
    setUploadProgress(0);
  };

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

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

    try {
      const response = await axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: (progressEvent) => {
          const percent = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
          setUploadProgress(percent);
        }
      });
      alert('上传成功');
      console.log('Server response:', response.data);
    } catch (error) {
      console.error('Upload error:', error);
      alert('上传失败');
    }
  };

  return (
    <div style={{ padding: 20 }}>
      <input type="file" accept="image/*" onChange={handleFileChange} />
      {preview && (
        <div>
          <img src={preview} alt="Preview" style={{ maxHeight: 200, marginTop: 10 }} />
          <button onClick={handleUpload} style={{ marginTop: 10 }}>
            上传图片
          </button>
          {uploadProgress > 0 && (
            <div style={{ marginTop: 10 }}>
              上传进度: {uploadProgress}%
              <progress value={uploadProgress} max="100" />
            </div>
          )}
        </div>
      )}
    </div>
  );
}

export default ImageUploader;