Next.js 13.4.1使用multipart/form-data上传图片报错求助

问题重现 #

使用Next.js 13.4.1的App Router开发，前端通过FormData提交图片文件到API路由，后端调用request.formData()时触发NotSupportedError: multipart/form-data not supported错误，更新依赖、尝试第三方库后问题仍存在。

原因分析 #

这个问题是Next.js 13.4.x早期版本（包括13.4.1）的App Router中，底层依赖的undici库对request.formData()解析multipart请求存在兼容性bug，导致无法正确处理表单数据。

可行解决方案 #

方案1：升级Next.js到13.4.7及以上版本 #

官方在13.4.7版本中修复了App Router里formData()不支持multipart/form-data的问题，执行升级命令：

npm install next@latest

升级后直接使用原有的request.formData()代码即可正常解析。

方案2：使用formidable库手动解析请求 #

如果暂时无法升级版本，可借助formidable库绕过Next.js的默认解析逻辑：

1. 安装依赖：

npm install formidable

2. 修改API路由代码（app/api/category/route.ts）：

import prisma from "@/libs/prisma";
import { NextRequest, NextResponse } from "next/server";
import { IncomingForm } from "formidable";

// 禁用Next.js默认的body解析，让formidable处理
export const config = {
  api: {
    bodyParser: false,
  },
};

export async function POST(request: NextRequest) {
  return new Promise((resolve, reject) => {
    const form = new IncomingForm();
    // 解析请求体
    form.parse(request, async (err, fields, files) => {
      if (err) {
        return resolve(NextResponse.json({ error: err.message }, { status: 500 }));
      }
      // 处理表单字段和文件
      console.log("表单字段:", fields);
      console.log("上传文件:", files);
      // 这里可以添加写入数据库或存储服务的逻辑
      resolve(NextResponse.json({ success: true }, { status: 200 }));
    });
  });
}

方案3：检查中间件是否干扰请求 #

如果项目中使用了自定义中间件，需确认中间件是否修改了请求的Content-Type头或截断了请求体，导致multipart数据无法被正确解析。可以临时禁用中间件测试，排查是否是中间件的问题。

验证 #

完成上述任一方案后，重新提交表单，即可正常解析multipart/form-data格式的请求，不再触发「格式不支持」的错误。

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