react 如何实现上传图片

使用React实现图片上传

在React中实现图片上传可以通过多种方式完成，以下是几种常见的方法：

使用HTML5的input元素

创建一个基本的文件上传输入框，通过React的状态管理来获取上传的文件：

import React, { useState } from 'react';

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

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

  const handleUpload = () => {
    if (!selectedFile) return;
    const formData = new FormData();
    formData.append('image', selectedFile);
    // 发送到服务器
    fetch('/upload', {
      method: 'POST',
      body: formData,
    });
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} accept="image/*" />
      <button onClick={handleUpload}>上传</button>
    </div>
  );
}

使用第三方库react-dropzone

对于更复杂的拖放上传功能，可以使用react-dropzone库：

import React, { useCallback, useState } from 'react';
import { useDropzone } from 'react-dropzone';

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

  const onDrop = useCallback((acceptedFiles) => {
    setFiles(acceptedFiles);
  }, []);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: 'image/*',
  });

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {isDragActive ? (
        <p>拖放图片到这里</p>
      ) : (
        <p>拖放图片或点击选择文件</p>
      )}
      {files.map((file) => (
        <div key={file.name}>
          {file.name} - {file.size} bytes
        </div>
      ))}
    </div>
  );
}

预览上传的图片

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

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

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

  return (
    <div>
      <input type="file" onChange={handleImageChange} accept="image/*" />
      {preview && <img src={preview} alt="预览" style={{ maxWidth: '100%' }} />}
    </div>
  );
}

使用axios发送文件到服务器

如果需要更复杂的请求处理，可以使用axios：

import axios from 'axios';

function AxiosUpload() {
  const [file, setFile] = useState(null);

  const uploadFile = async () => {
    const formData = new FormData();
    formData.append('file', file);
    try {
      await axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <input
        type="file"
        onChange={(e) => setFile(e.target.files[0])}
        accept="image/*"
      />
      <button onClick={uploadFile}>上传</button>
    </div>
  );
}

处理多文件上传

如果需要上传多个文件，可以修改状态管理：

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

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

  const uploadFiles = () => {
    const formData = new FormData();
    files.forEach((file) => {
      formData.append('files', file);
    });
    fetch('/upload-multiple', {
      method: 'POST',
      body: formData,
    });
  };

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

这些方法覆盖了React中实现图片上传的基本场景，从简单的文件选择到复杂的拖放上传和多文件处理。根据项目需求选择合适的方法即可。