React图片上传组件FormData为空问题求助（React-Bootstrap+RTK Query）

核心问题 #

你遇到的情况本质是引用类型在React useState中的更新逻辑问题，加上FormData本身的打印特性导致的误解：

1. FormData是引用类型，直接修改原实例后调用setFormData(formData)，React会认为引用没变化，不会触发状态更新，后续读取的还是旧的空FormData。
2. 直接console.log(formData)本身就不会显示内部的键值对，必须通过formData.get('字段名')或遍历entries()才能看到真实内容，但你的问题是确实为空，所以核心是状态更新方式错了。

具体解决办法 #

方案1：只存File对象，上传时再生成FormData #

这是最稳妥的方式，避免处理FormData的引用问题：

import { useState } from 'react';
import { Button, Form } from 'react-bootstrap';
import { useUploadFileMutation } from './apiSlice';

const ImageUpload = () => {
  const [selectedFile, setSelectedFile] = useState(null);
  const [uploadFile, { isLoading }] = useUploadFileMutation();

  const handleChange = (e) => {
    const file = e.target.files[0];
    console.log(file); // 正常打印File对象
    setSelectedFile(file);
  };

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

    // 上传前才创建FormData
    const formData = new FormData();
    formData.append('file', selectedFile);
    
    // 验证内容
    console.log(formData.get('file')); // 能看到正确的File
    await uploadFile(formData);
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Form.Control type="file" onChange={handleChange} />
      <Button type="submit" disabled={isLoading}>上传</Button>
    </Form>
  );
};

export default ImageUpload;

方案2：必须存FormData时，每次创建新实例 #

如果业务需要提前存FormData（比如多文件上传），要确保每次更新都创建新的FormData实例：

const [formData, setFormData] = useState(new FormData());

const handleChange = (e) => {
  const file = e.target.files[0];
  console.log(file);
  
  // 复制旧FormData内容到新实例，再添加新文件
  const newFormData = new FormData(formData);
  newFormData.append('file', file);
  
  setFormData(newFormData); // 新引用触发状态更新
};

const handleSubmit = async (e) => {
  e.preventDefault();
  
  // 验证FormData内容
  for (let [key, value] of formData.entries()) {
    console.log(key, value); // 能看到所有上传的文件
  }
  
  await uploadFile(formData);
};

方案3：检查RTK Query接口配置 #

确保你的上传接口没有手动设置错误的请求头，FormData上传时浏览器会自动生成带boundary的multipart/form-data头，手动设置会导致后端无法解析：

// 错误示例 ❌
uploadFile: builder.mutation({
  query: (formData) => ({
    url: '/api/upload',
    method: 'POST',
    body: formData,
    headers: { 'Content-Type': 'multipart/form-data' } // 不要加这个！
  }),
})

// 正确示例 ✅
uploadFile: builder.mutation({
  query: (formData) => ({
    url: '/api/upload',
    method: 'POST',
    body: formData,
    // 不需要手动设置headers
  }),
})

关键提醒 #

• 永远不要直接修改useState里的引用类型（比如formData.append()后直接setFormData(formData)），React依赖引用变化来识别状态更新，引用不变的话组件不会重渲染，状态也不会更新。
• 打印FormData一定要用formData.get('字段名')或者遍历entries()，直接console.log(formData)只会显示空的FormData对象，这是浏览器的特性，不是代码问题。

内容的提问来源于stack exchange，提问作者Jonny Dungeons