react如何上传图片

上传图片的基本方法

在React中上传图片通常涉及文件输入处理和表单提交。以下是实现的基本步骤：

创建文件输入元素并处理文件选择：

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

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

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      {selectedFile && <p>已选择: {selectedFile.name}</p>}
    </div>
  );
}

图片预览功能

在文件选择后立即显示图片预览：

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

  const handleFileChange = (event) => {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setPreview(reader.result);
      };
      reader.readAsDataURL(file);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      {preview && <img src={preview} alt="预览" style={{ maxWidth: '300px' }} />}
    </div>
  );
}

上传到服务器

使用FormData将图片发送到后端API：

async function handleUpload() {
  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);
  }
}

使用第三方库

对于更复杂的需求，可以使用react-dropzone等库：

import { useDropzone } from 'react-dropzone';

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

  return (
    <div {...getRootProps()} style={{ border: '2px dashed #ccc', padding: '20px' }}>
      <input {...getInputProps()} />
      <p>拖放图片到这里，或点击选择文件</p>
    </div>
  );
}

处理多文件上传

支持同时上传多个图片：

function MultiImageUpload() {
  const [files, setFiles] = useState([]);

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

  const uploadFiles = async () => {
    const formData = new FormData();
    files.forEach(file => {
      formData.append('images', file);
    });

    // 上传逻辑...
  };

  return (
    <div>
      <input type="file" multiple onChange={handleFileChange} />
      <button onClick={uploadFiles}>上传所有图片</button>
    </div>
  );
}

错误处理和进度显示

添加上传进度和错误处理：

function UploadWithProgress() {
  const [progress, setProgress] = useState(0);
  const [error, setError] = useState(null);

  const uploadWithProgress = (file) => {
    const xhr = new XMLHttpRequest();
    xhr.upload.addEventListener('progress', (event) => {
      if (event.lengthComputable) {
        setProgress(Math.round((event.loaded / event.total) * 100));
      }
    });

    xhr.onload = () => {
      if (xhr.status !== 200) {
        setError('上传失败');
      }
    };

    const formData = new FormData();
    formData.append('image', file);
    xhr.open('POST', '/api/upload', true);
    xhr.send(formData);
  };

  return (
    <div>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      {progress > 0 && <progress value={progress} max="100" />}
    </div>
  );
}