使用Axios.post发送学生对象至后端时数据缺失的问题求助

问题根源 #

使用multipart/form-data传输嵌套对象时，直接将嵌套对象塞入FormData会被浏览器转为[object Object]字符串，multer无法解析这种格式；同时手动设置Content-Type: multipart/form-data会丢失axios自动生成的boundary分隔符，导致字段解析异常，出现部分嵌套字段丢失的情况。

解决方案1：序列化整个对象为JSON字符串传输（推荐嵌套结构复杂场景） #

前端代码修改

const handleSave = () => {
  const formData = new FormData();
  // 将完整student对象转为JSON字符串作为单个字段传入
  formData.append('student', JSON.stringify(student));
  // 如有文件需上传，单独追加字段
  // formData.append('avatar', student.avatarFile);

  axios.post('/api/students', formData)
    // 不要手动设置Content-Type，axios会自动生成带boundary的请求头
    .then(res => console.log('提交成功', res.data))
    .catch(err => console.error('提交失败', err));
};

后端代码修改

const express = require('express');
const multer = require('multer');
const router = express.Router();
const upload = multer(); // 无文件上传时用内存存储即可

router.post('/', upload.none(), (req, res) => {
  // 解析JSON字符串还原为对象
  const student = JSON.parse(req.body.student);
  console.log('完整student对象:', student);
  // 后续业务逻辑处理
  res.status(200).json({ message: '接收成功', data: student });
});

module.exports = router;

解决方案2：手动拆解嵌套字段为FormData键值对（适合需单独处理嵌套字段场景） #

前端代码修改

const handleSave = () => {
  const formData = new FormData();
  // 追加顶层字段
  formData.append('sisn', student.sisn);
  formData.append('level', student.level);
  // 用点语法追加嵌套personal字段
  formData.append('personal.name', student.personal.name);
  formData.append('personal.age', student.personal.age);
  // 用点语法追加嵌套parents字段
  formData.append('parents.fatherName', student.parents.fatherName);
  formData.append('parents.motherName', student.parents.motherName);
  // 如有文件需上传
  // formData.append('avatar', student.avatarFile);

  axios.post('/api/students', formData)
    .then(res => console.log('提交成功', res.data))
    .catch(err => console.error('提交失败', err));
};

后端代码修改

需要借助qs库解析嵌套键值对（先执行npm install qs安装）：

const express = require('express');
const multer = require('multer');
const qs = require('qs');
const router = express.Router();
const upload = multer();

router.post('/', upload.none(), (req, res) => {
  // 解析嵌套键值对为完整对象
  const student = qs.parse(req.body);
  console.log('完整student对象:', student);
  // 后续业务逻辑处理
  res.status(200).json({ message: '接收成功', data: student });
});

module.exports = router;

关键注意事项 #

• 不要手动设置Content-Type：axios会自动根据FormData生成包含boundary的请求头，手动设置会丢失该分隔符，导致后端无法正确分割字段。
• multer配置适配：无文件上传时用upload.none()，有文件时用upload.single('filename')或upload.array('filenames')。
• JSON格式校验：使用方案1时，确保前端序列化的JSON字符串格式合法，避免后端解析报错。

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