Next.js使用fetch代理multipart form data请求时文件上传失效如何解决？

问题根因 #

代码失效的核心原因是 Next.js API路由默认会自动解析所有请求体，包括multipart/form-data类型，你拿到的req.body是已经被解析后的结构化对象，不是后端需要的原始multipart数据流，直接传这个对象后端无法正确识别文件和表单字段。

修复方案 #

1. 禁用Next.js默认的body解析逻辑

在你的API路由文件中添加如下配置，关闭自动解析，保留原始请求流：

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

2. 修改请求体透传逻辑

直接将原始的req（可读流）作为fetch的body参数，不需要手动序列化JSON、也不需要判断请求类型，流会自动适配不同的请求格式。

3. 保留原始请求头

确保multipart请求的Content-Type头完整透传，不要修改或者覆盖里面的boundary字段，原有透传逻辑无需调整。

修改后完整代码 #

import { NextApiRequest, NextApiResponse } from "next"
import { getSession } from 'next-auth/client'
import Cookies from 'cookies'
import { apiURL } from 'apps/dashboard/config'

// 新增：禁用默认body解析
export const config = {
  api: {
    bodyParser: false,
  },
};

const theProxy = async (req: NextApiRequest, res: NextApiResponse) => {
    const session = await getSession({ req })

    const { method, query, headers } = req

    const cookies = new Cookies(req, res)
    let {path, ...params} = query
    path = (path as string[]).join("/")
    // 若没有自定义toQueryString，可以替换为：new URLSearchParams(params as Record<string, string>).toString()
    const searchParams = toQueryString(params)

    const options = {
        method,
        // 直接透传原始请求流，非GET/HEAD请求才传body
        body: method != "GET" && method != "HEAD" ? req : undefined,
        headers: {
            'Content-Type': headers['content-type'] || "application/json",
            ...(session ? {'cookie':  session?.user['cookies']} : {}),
            sessionID: cookies.get("sessionID")
        }
    }

    if(headers['content-length']){
        options.headers["Content-Length"] = headers['content-length']
    }

    const response = await fetch(`${apiURL}/${path}?${searchParams}`, options)

    try {
        const respBody = await response.json()
        res.status(response.status).json(respBody)
    } catch (error) {
        res.status(response.status).end(response.statusText)
    }
}

export default theProxy

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