Fetch API提交表单时/addhousehold接口向MySQL插入空值问题

开发者阿泽

2026-6-28

问题解决方案

1. 修正Fetch请求的Content-Type设置

当使用FormData发送请求时，不要手动设置Content-Type: multipart/form-data——浏览器会自动生成包含正确boundary的Content-Type头，手动设置会丢失boundary，导致服务器无法正确解析表单数据。

正确的Fetch代码示例：

// 收集家庭表单数据
const householdForm = document.getElementById('householdForm');
const formData = new FormData(householdForm);

// 发送请求
fetch('/addhousehold', {
  method: 'POST',
  body: formData
  // 不要添加headers里的Content-Type
})
.then(response => response.json())
.catch(err => console.error(err));

2. 配置服务器端的multipart表单解析中间件

如果使用Express框架，默认的express.urlencoded中间件无法处理multipart/form-data类型的请求，需要使用multer中间件：

安装multer：

npm install multer

在服务器代码中配置：

const express = require('express');
const multer = require('multer');
const app = express();

// 配置multer（无文件上传时用upload.none()）
const upload = multer();

// 给/addhousehold路由添加multer中间件
app.post('/addhousehold', upload.none(), (req, res) => {
  // 现在req.body应该能拿到所有家庭表单字段
  console.log(req.body);
  // 后续数据库插入逻辑
});

3. 检查表单字段的`name`属性

确认家庭表单的所有输入控件都设置了正确的name属性——服务器端是通过name来识别表单字段的，没有name的字段不会被包含在FormData中，自然无法在req.body中获取到。

示例：

<!-- 正确写法 -->
<input type="text" name="household_address" placeholder="家庭地址">
<!-- 错误写法（仅设置id，无name） -->
<input type="text" id="household_address" placeholder="家庭地址">