在Vercel部署的NextJS中无法解析formData（图片上传）求助

我有一套图片上传至S3的代码，在本地环境和NGINX服务器部署时运行正常，但切换到Vercel部署后功能故障。

后端POST路由代码 #

export const POST = async (req: NextRequest, res: NextResponse) => {

console.log("Posting to image endpoint")

const middlewareResult = checkAuthHeadersAndOrigin(req);
if (middlewareResult) {
    return middlewareResult;
}

console.log("passed middleware") // 此处能输出日志

const formData = await req.formData();

console.log("data", formData) // 此处日志从未输出

尝试的解决方案及遇到的错误 #

查阅资料得知Vercel对大文件上传有限制，参考建议添加以下配置：

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

添加后收到错误提示：

Error: Page config in /vercel/path0/mysite/src/app/api/image/route.ts is deprecated. Replace export const config=… with the following:

但错误未告知替代配置。

前端POST请求代码 #

const response = await fetch(`/api/image`, {
    method: 'POST',
    headers: {
        "Access-Control-Allow-Origin": "*",
        'Accept': '*',
        'uid': uid,
        'email': email,
        "Authorization": `Bearer ${process.env.NEXT_PUBLIC_SECRET_TOKEN}`
    },
    body: imageData
});

排查分析及解决步骤 #

1. App Router下停用bodyParser的正确配置 #

你使用的是Next.js App Router（路由文件位于src/app/api/.../route.ts），旧的export const config配置方式已废弃，需改用以下方式：

• 若需调整bodyParser限制：

export const config = {
  runtime: 'nodejs', // 确保使用Node.js runtime，兼容S3上传逻辑
  bodyParser: {
    sizeLimit: '10mb', // 根据图片大小调整，Vercel默认限制4.5MB
  },
};

• 若需完全禁用bodyParser（适合流式上传）：

export const config = {
  runtime: 'nodejs',
  bodyParser: false,
};

2. 修复前端请求头错误 #

前端请求中设置的"Access-Control-Allow-Origin": "*"是响应头，而非请求头，添加该请求头会导致Vercel网关拦截请求，需移除：

const response = await fetch(`/api/image`, {
    method: 'POST',
    headers: {
        'Accept': '*',
        'uid': uid,
        'email': email,
        "Authorization": `Bearer ${process.env.NEXT_PUBLIC_SECRET_TOKEN}`
        // 移除 Access-Control-Allow-Origin 请求头
    },
    body: imageData
});

3. 处理Vercel大文件上传限制 #

若图片超过Vercel Serverless函数默认4.5MB的请求体限制，需：

• 启用流式上传，避免一次性读取整个请求体
• 调整bodyParser.sizeLimit至合适值（Vercel最大支持100MB）
• 若使用大文件（>100MB），建议改用Vercel Blob存储中转后再同步到S3

4. 调试FormData解析错误 #

在后端添加错误捕获，查看req.formData()抛出的具体异常：

export const POST = async (req: NextRequest) => {
  console.log("Posting to image endpoint")

  const middlewareResult = checkAuthHeadersAndOrigin(req);
  if (middlewareResult) {
      return middlewareResult;
  }

  console.log("passed middleware")
  try {
    const formData = await req.formData();
    console.log("data", formData)
  } catch (error) {
    console.error("FormData解析失败:", error);
    return NextResponse.json({ error: "表单数据解析失败" }, { status: 500 });
  }
  // 后续S3上传逻辑
}

5. 确认Runtime兼容性 #

若你的S3上传代码依赖Node.js特定API（如fs、stream），必须确保路由使用nodejs runtime，避免使用edge runtime（部分Node.js API不可用）。

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