React.js中Form Data传递对象时响应为空问题求助

在React中发送包含文本输入和文件的FormData，按如下代码实现后，接口响应返回空对象。

状态定义代码 #

const [ModelInfo,setModelInfo] = useState({
    title:"",
    description:"",
    category:""
})

const [Modelfile,setModelfile] = useState({
    file1:"",
    file3:"",
    file4:""
})

提交处理函数代码 #

e.preventDefault();

const formData = new FormData();

// 追加文件到FormData
for(let key in Modelfile){
    formData.append(key,Modelfile[key][0])
}

// 追加文本字段到FormData
for(let key in ModelInfo){
    formData.append(key,ModelInfo[key])
}

fetch("http://192.168.10.8:8300/createpost",{
    method:"POST",
    body:formData
})
.then((resp)=>{        
    resp.json().then((data) => {
        console.log(data)
    })
})

请求情况 #

Payload内容：
file1: (binary)
file3: (binary)
file4: (binary)
title: test
description: test
category: test

预览结果：{}

响应返回空对象

排查与解决方案 #

1. 检查后端解析逻辑
   后端必须正确处理multipart/form-data类型的请求。如果使用Node.js+Express，需用multer中间件解析文件和文本字段，express.json()或express.urlencoded()无法解析FormData。

   Express后端示例：

   const multer = require('multer');
   const upload = multer({ dest: 'uploads/' }); // 指定文件存储目录
   
   app.post('/createpost', upload.fields([{name:'file1'}, {name:'file3'}, {name:'file4'}]), (req, res) => {
       // 文本字段在req.body，文件在req.files
       const { title, description, category } = req.body;
       const { file1, file3, file4 } = req.files;
       // 业务处理逻辑
       res.json({ success: true, data: { title, description, category, file1, file3, file4 } });
   });
   

2. 验证前端FormData构造
   确认Modelfile中的值是有效的File对象数组，需在文件输入的onChange事件中正确获取文件：

   const handleFileChange = (e, key) => {
       setModelfile(prev => ({ ...prev, [key]: e.target.files }));
   };
   

   确保Modelfile[key]是FileList类型，这样Modelfile[key][0]才是有效File对象。

3. 不要手动设置Content-Type
   fetch发送FormData时会自动生成带正确boundary的Content-Type: multipart/form-data，手动添加该Header会导致后端无法解析。

4. 排查跨域问题
   若前后端域名/端口不同，需确保后端配置CORS允许FormData请求。Express中可使用cors中间件：

   const cors = require('cors');
   app.use(cors());
   

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