如何解码通过fetch POST请求发送的FormData表单数据？

问题场景 #

前端通过FormData发送POST请求：

const formData = new FormData();
formData.append('id', '123');
const res = await fetch('./handler', { method: 'POST', body: formData });
const json = await res.json();

后端handler.js（以Next.js API路由为例）代码：

export default async function handler(req, res) {
 console.log(req.body.id); // 输出undefined
 console.log(req.body); // 输出原始multipart格式数据
 ...
}

此时直接访问req.body.id会得到undefined，因为req.body是未解析的multipart原始字符串，而非结构化的对象。

解决方案 #

方法1：利用框架内置解析（以Next.js为例） #

Next.js的API路由默认不会自动解析multipart/form-data，可以直接调用内置的req.formData()方法完成解析：

export default async function handler(req, res) {
  if (req.method === 'POST') {
    // 解析表单数据为FormData对象
    const formData = await req.formData();
    const id = formData.get('id'); // 获取指定字段值
    console.log(id); // 输出123
    
    // 后续业务逻辑
    res.status(200).json({ id });
  }
}

Next.js 13+的App Router同样支持该方法，无需额外配置。

方法2：使用第三方库formidable #

如果是旧版本框架或自定义Node.js服务，可以用formidable库解析：

1. 安装依赖：

npm install formidable
# 或
yarn add formidable

2. 修改后端代码：

import formidable from 'formidable';

// 禁用框架默认的body解析，交给formidable处理
export const config = {
  api: {
    bodyParser: false,
  },
};

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const form = formidable({ multiples: false });
    
    form.parse(req, (err, fields, files) => {
      if (err) {
        res.status(500).json({ error: err.message });
        return;
      }
      const id = fields.id[0]; // formidable返回的字段值为数组格式
      console.log(id); // 输出123
      
      res.status(200).json({ id });
    });
  }
}

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