Next.js发送FormData至API接口无响应 本地调用失败问题咨询

1. 前端请求头配置错误：使用fetch发送FormData请求时，手动指定了Content-Type: application/x-www-form-urlencoded。FormData对应的请求类型为multipart/form-data，且需要浏览器自动生成boundary分隔符参数才能被后端正确解析，手动指定Content-Type会丢失该参数，导致后端无法识别请求内容。
2. Next.js API路由默认不支持解析FormData：Next.js内置的bodyParser仅处理JSON、x-www-form-urlencoded格式的请求，对于multipart/form-data类型的请求会直接跳过解析，因此你打印的req.body为空，后续业务逻辑无法正常执行。
   Postman请求正常的原因是其发送FormData时会自动生成带正确boundary参数的请求头，匹配后端的解析规则。

1. 修正前端请求配置 #

移除fetch请求中手动设置的Content-Type头，让浏览器自动生成适配FormData的请求头：

const requestOptions = {
  method: 'POST',
  body: formData
  // 删除手动设置的headers.Content-Type配置
};

你现有代码中Axios的调用逻辑无需修改，只要没有全局Axios配置覆盖Content-Type即可正常使用。

2. 适配Next.js API路由的FormData解析 #

首先安装formidable库用于解析multipart请求：
npm install formidable
修改API路由代码，关闭默认bodyParser并使用formidable解析请求：

import formidable from 'formidable';

// 关闭Next.js默认的body解析
export const config = {
  api: {
    bodyParser: false,
  },
};

export default async function handler(req, res) {
  const form = formidable({});
  // 解析FormData内容，fields为普通字段，files为上传的文件对象
  const [fields, files] = await form.parse(req);
  
  console.log('普通参数', fields);
  console.log('上传的文件', files);

  // 原有业务逻辑，拿到文件对象后上传到AWS S3即可

  res.status(200).json({response: 'test', code: 200, message:"Successfully created the post."})
}

可以将图片转换为Base64字符串后通过JSON请求传递，仅适用于小体积图片（Base64会使文件体积增大约30%，大图片会严重降低传输效率）：

• 前端通过FileReader将图片文件读取为Base64字符串，作为普通字段放入JSON请求体中发送
• 后端接收到Base64字符串后转换为Buffer，即可直接上传到AWS S3

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