Next.js App Router下创建上传API路由遇req.file undefined问题求助

核心问题分析 #

App Router中仍支持通过export const config禁用默认bodyParser，但需确保配置位置正确；同时next-connect在App Router中需使用适配的API，且multer的字段名需与前端上传的表单字段完全匹配。

步骤1：正确配置API路由文件 #

在app/admin/upload/route.js中编写如下代码（确保next-connect版本为1.x）：

import { createRouteHandler } from 'next-connect';
import multer from 'multer';

// 配置multer存储（示例用内存存储，可按需改为磁盘存储）
const storage = multer.memoryStorage();
const upload = multer({ storage });

// 创建next-connect路由处理器，适配App Router
const handler = createRouteHandler({
  onError: (err, req, res) => {
    console.error(err.stack);
    res.status(500).json({ message: '服务器错误' });
  },
});

// 绑定multer中间件，注意这里的字段名'file'要和前端上传的表单字段一致
handler.use(upload.single('file'));

// 处理POST请求
handler.post(async (req, res) => {
  console.log(req.file); // 此时应能正常获取文件对象
  if (!req.file) {
    return res.status(400).json({ message: '未检测到上传文件' });
  }
  
  // 此处添加你的文件处理逻辑（如保存到云存储、生成文件信息等）
  res.status(200).json({
    message: '上传成功',
    filename: req.file.originalname,
    size: req.file.size
  });
});

// 禁用Next.js默认的bodyParser，让multer自行解析请求体
export const config = {
  api: {
    bodyParser: false,
  },
};

export default handler;

步骤2：前端上传代码校验 #

确保前端使用FormData正确构造请求，且字段名与后端upload.single('file')中的字段名一致：

// 示例前端代码
const handleUpload = async (file) => {
  const formData = new FormData();
  formData.append('file', file); // 字段名必须和后端的'file'一致

  try {
    const response = await fetch('/admin/upload', {
      method: 'POST',
      body: formData,
    });
    const result = await response.json();
    console.log(result);
  } catch (err) {
    console.error(err);
  }
};

关键排查点 #

• 确认next-connect版本：必须安装1.x版本（执行npm install next-connect@latest），旧版本不支持App Router。
• 检查请求Content-Type：浏览器会自动为FormData请求设置multipart/form-data，无需手动指定，避免手动设置导致格式错误。
• 验证字段名一致性：前端formData.append的字段名必须和后端upload.single('xxx')中的xxx完全匹配，包括大小写。
• 确认配置位置：export const config必须和路由处理器在同一个route.js文件中，不能拆分到其他文件。

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