NextJS自定义函数提交表单问题：API参数解析异常、前端响应获取失败

问题1：后端无法解析FormData提交的表单字段 #

原因 #

Next.js 原生API路由的默认body解析器仅支持解析application/json、application/x-www-form-urlencoded格式的请求体，你用FormData提交时请求类型为multipart/form-data，默认解析器不会处理该类型，因此req.body会返回带WebKitFormBoundary的原始未解析字符串。

修复步骤 #

1. 首先在后端addproduct.js中关闭默认body解析器，添加导出配置：

export const config = {
  api: {
    bodyParser: false
  }
}

2. 安装formidable库（专门用于解析multipart/form-data请求），然后修改接口逻辑：

import formidable from 'formidable'

export default async function handler(req, res) {
  if (req.method !== 'POST') return res.status(405).json({ message: '请求方法不支持' })

  // 初始化formidable实例，支持多文件/多值字段
  const form = formidable({ multiples: true })

  form.parse(req, (err, fields, files) => {
    if (err) return res.status(500).json({ message: '表单解析失败' })
    // fields为所有普通表单字段，files为上传的文件资源
    const newItem = {
      ...fields,
      // 处理数组类型字段，避免单值时返回字符串而非数组
      colours: Array.isArray(fields.colours) ? fields.colours : [fields.colours].filter(Boolean),
      sizes: Array.isArray(fields.sizes) ? fields.sizes : [fields.sizes].filter(Boolean)
    }
    // 原有商品保存逻辑...
    res.status(200).json({ message: '商品上传成功' })
  })
}

3. 前端提交FormData时，不要手动设置Content-Type请求头，浏览器会自动生成带正确boundary标识的请求头，手动设置会丢失boundary导致解析失败。

问题2：前端无法读取返回的message字段 #

原因 #

fetch请求返回的是Response流对象，需要先调用.json()方法将流解析为JS对象，才能读取到接口返回的字段，直接从Response对象取message会得到undefined。

修复步骤 #

修改前端handleAddProduct的fetch逻辑：

const handleAddProduct = async (e) => {
  e.preventDefault()
  const formData = new FormData(e.target)
  try {
    const res = await fetch('/admin/api/addproduct', {
      method: 'POST',
      body: formData
      // 不要加Content-Type头配置
    })
    // 必须先解析响应流为JSON对象
    const result = await res.json()
    // 正常读取message字段
    alert(result.message)
    // 后续成功逻辑：清空表单、跳转页面等
  } catch (err) {
    console.error('提交失败', err)
    alert('商品提交失败，请重试')
  }
}

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