NextJS结合multer上传文件失败，req.file返回undefined求助

核心问题分析 #

你的代码存在两处关键错误，导致后端无法正确解析上传的文件：

1. 后端未正确执行multer中间件，只是定义了中间件但未处理请求
2. 前端手动设置了Content-Type，丢失了FormData必需的boundary参数

后端代码修复 #

multer的upload.single("avatar")是一个Express中间件函数，需要手动传入req、res并执行才能解析文件。我们可以用promisify包装它，适配async/await语法：

import dbConnect from "../../lib/dbConnect";
import type { NextApiRequest, NextApiResponse, PageConfig } from 'next'
import authenticated from "../../lib/authenticated";
const multer = require("multer");
const { promisify } = require('util');

export default authenticated(async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
    await dbConnect()
    const {method} = req
    const storage = multer.memoryStorage();
    const upload = multer({storage: storage});
    // 将multer中间件转为Promise形式
    const singleUpload = promisify(upload.single("avatar"));

    if (method === "POST") {
        try {
            // 执行上传中间件，解析文件到req.file
            await singleUpload(req, res);
            const file = req.file;
            res.status(200).json({success: true, data: file})
        } catch (err) {
            res.status(400).json({success: false, error: err.message})
        }
    } else {
        res.setHeader('Allow', ['POST']);
        res.status(405).end(`Method ${method} Not Allowed`);
    }
});

export const config: PageConfig = {
    api: {
        bodyParser: false
    }
}

前端代码修复 #

手动设置Content-Type: multipart/form-data会丢失浏览器自动生成的boundary参数，后端无法识别表单分隔符，导致文件解析失败。直接移除该header即可：

const [avatar, setAvatar]: any = useState<File | null>(null);

async function handleUpload () {
    if (!avatar) return; // 先校验文件是否存在
    const formData = new FormData();
    formData.append("avatar", avatar);
    const resp = await fetch("http://localhost:3000/api/uploadavatar", {
        method: "POST",
        // 移除手动设置的Content-Type，浏览器会自动生成正确的头
        body: formData
    });
    const json = await resp.json();
    console.log(json.data)
}

错误原因说明 #

1. 后端multer执行逻辑错误：multer中间件需要主动处理请求才能解析文件，仅调用upload.single("avatar")不会对req产生任何修改，必须传入req、res并执行后，req.file才会被填充。
2. 前端Content-Type设置错误：FormData提交时，浏览器会自动生成包含boundary的Content-Type（例如multipart/form-data; boundary=----WebKitFormBoundaryXXXX），手动设置固定值会丢失这个分隔符，导致后端无法拆分表单数据。

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