react如何提交图片

使用表单提交图片

在React中提交图片通常通过HTML的<input type="file">元素实现。创建一个受控组件来捕获用户选择的文件，并通过表单提交。

import { useState } from 'react';

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

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

  const handleSubmit = async (event) => {
    event.preventDefault();
    if (!selectedFile) return;

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

    try {
      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      });
      const result = await response.json();
      console.log('Success:', result);
    } catch (error) {
      console.error('Error:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" onChange={handleFileChange} />
      <button type="submit">Upload</button>
    </form>
  );
}

使用第三方库简化上传

对于更复杂的场景，可以使用如react-dropzone或axios等库简化文件上传流程。以下是使用axios的示例：

import axios from 'axios';
import { useState } from 'react';

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

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

  const handleSubmit = async (event) => {
    event.preventDefault();
    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('Success:', response.data);
    } catch (error) {
      console.error('Error:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" onChange={handleFileChange} />
      <button type="submit">Upload</button>
    </form>
  );
}

显示上传进度

对于大文件上传，显示上传进度可以提升用户体验。通过axios的onUploadProgress回调实现：

const handleSubmit = async (event) => {
  event.preventDefault();
  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 percentCompleted = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        );
        console.log(`${percentCompleted}% uploaded`);
      },
    });
    console.log('Success:', response.data);
  } catch (error) {
    console.error('Error:', error);
  }
};

处理多文件上传

如果需要上传多张图片，可以修改<input>元素的multiple属性，并调整状态和处理逻辑：

const [selectedFiles, setSelectedFiles] = useState([]);

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

const handleSubmit = async (event) => {
  event.preventDefault();
  if (selectedFiles.length === 0) return;

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

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

return (
  <form onSubmit={handleSubmit}>
    <input type="file" multiple onChange={handleFileChange} />
    <button type="submit">Upload</button>
  </form>
);

前端预览图片

在提交前允许用户预览选择的图片，可以通过URL.createObjectURL实现：

const [previewUrls, setPreviewUrls] = useState([]);

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

  const urls = files.map(file => URL.createObjectURL(file));
  setPreviewUrls(urls);
};

return (
  <form onSubmit={handleSubmit}>
    <input type="file" multiple onChange={handleFileChange} />
    <div>
      {previewUrls.map((url, index) => (
        <img key={index} src={url} alt="Preview" style={{ width: 100, height: 100 }} />
      ))}
    </div>
    <button type="submit">Upload</button>
  </form>
);