后端无法获取请求体：FormData+Axios请求问题排查

当发送FormData格式数据时，前后端都需要做对应配置才能正常解析，以下是具体修复步骤：

前端修复点 #

1. 你的sendData函数遗漏了async关键字，会导致await语法报错
2. Axios发送FormData时无需手动设置Content-Type，框架会自动根据数据类型添加包含boundary的正确请求头

修正后的前端代码：

const email = 'my@gmail';
const url = 'http://你的后端接口地址';

// 补全async关键字
const sendData = async () =>{
 let fd = new FormData();

 const audio = new Blob(audioData, { type: "audio/ogg; codecs=opus" });

 fd.append('audio' , audio);
 fd.append('email', email);

 try {
  const resp = await axios.post(url, fd);
  console.log('请求成功', resp);
 } catch (err) {
  console.error('请求失败', err);
 }
};

后端修复点 #

Express默认的express.json()和express.urlencoded()中间件无法解析multipart/form-data格式的请求，必须使用multer中间件处理：

1. 先安装multer依赖

npm install multer

2. 在后端项目中配置并使用multer

const express = require('express');
const multer = require('multer');
const { User } = require("../models/userSchema");

const app = express();
// 配置内存存储（也可根据需求配置磁盘存储）
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// 在需要处理FormData的路由/中间件前添加upload中间件
module.exports = upload.any(), async function (req, res, next) {
    // 文本字段从req.body获取，文件字段从req.files获取
    console.log('文本字段:', req.body); // { email: 'my@gmail' }
    console.log('文件字段:', req.files); // 包含audio文件的数组
    next();
};

如果只需要解析指定字段，可替换upload.any()为upload.fields([{name: 'audio'}, {name: 'email'}])，此时req.files会是对应字段的对象。

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