当前位置：首页 > React

react如何提交图片

2026-02-26 13:37:27React

使用FormData提交图片

在React中提交图片通常需要将图片文件转换为FormData对象，然后通过fetch或axios发送到服务器。以下是实现步骤：

创建表单并绑定文件输入

<input type="file" onChange={handleFileChange} />

处理文件选择事件

react如何提交图片

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

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

创建提交函数

const handleSubmit = async () => {
  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:', error);
  }
};

使用axios提交图片

如果使用axios库，需要注意设置正确的Content-Type头部：

react如何提交图片

import axios from 'axios';

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

图片预览功能

在上传前显示图片预览可以提升用户体验：

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

const handleFileChange = (event) => {
  const file = event.target.files[0];
  setSelectedFile(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="Preview" style={{maxWidth: '300px'}} />}
  </div>
);

处理多文件上传

如果需要上传多个文件，可以修改处理逻辑：

const handleFileChange = (event) => {
  const files = Array.from(event.target.files);
  setSelectedFiles(files);
};

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

  // 其余上传逻辑相同
};

进度显示

对于大文件上传，可以显示上传进度：

const [progress, setProgress] = useState(0);

const handleSubmit = async () => {
  const config = {
    onUploadProgress: (progressEvent) => {
      const percentCompleted = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      );
      setProgress(percentCompleted);
    },
  };

  await axios.post('/api/upload', formData, config);
};