Next.js 13.2路由处理器中如何获取请求体里的文件？

你遇到的问题核心是：Next.js默认的NextApiRequest没有内置解析multipart/form-data（文件上传专用格式）的能力，所以req.files本身就是undefined，直接访问req.files.file必然报错。

下面是具体的解决步骤：

方案一：用next-connect（适配Next.js的推荐方案） #

1. 安装依赖 #

npm install next-connect multer
# 或
yarn add next-connect multer

2. 修改API路由代码 #

import type { NextApiRequest, NextApiResponse } from 'next'
import nextConnect from 'next-connect'
import multer from 'multer'

// 配置文件存储方式，这里用内存存储，也可改成磁盘存储
const storage = multer.memoryStorage()
const upload = multer({ storage })

const handler = nextConnect<NextApiRequest, NextApiResponse>()
  // 解析表单中名为'file'的单个文件
  .use(upload.single('file'))
  .post((req, res) => {
    // 现在req.file就是你上传的文件对象
    console.log(req.file)
    // 这里可以添加文件处理逻辑，比如读取buffer、保存到磁盘等
    res.status(200).json({ message: '文件接收成功', fileName: req.file?.originalname })
  })

export default handler

// 必须禁用Next.js默认的body解析器，交给multer处理
export const config = {
  api: {
    bodyParser: false,
  },
}

方案二：直接使用multer（不借助next-connect） #

修改API路由代码 #

import type { NextApiRequest, NextApiResponse } from 'next'
import multer from 'multer'

const storage = multer.memoryStorage()
const upload = multer({ storage })

// 把multer中间件适配成Next.js API路由支持的形式
const uploadMiddleware = upload.single('file')

export async function POST(req: any, res: NextApiResponse) {
  await new Promise((resolve, reject) => {
    uploadMiddleware(req, res, (err) => {
      if (err) reject(err)
      else resolve(null)
    })
  })

  console.log(req.file)
  res.status(200).json({ message: '文件接收成功' })
}

// 同样要禁用默认body解析器
export const config = {
  api: {
    bodyParser: false,
  },
}

前端代码注意事项 #

你的前端代码没问题，但要记住：axios会自动根据FormData生成正确的Content-Type: multipart/form-data请求头，不要手动设置这个头，手动添加反而可能导致解析失败。

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