Next.js新手求助：Form-data无法上传至API的问题排查

客户端代码问题及修复 #

1. 手动设置Content-Type错误
   当请求体为FormData时，axios会自动生成包含boundary的正确multipart/form-data请求头，手动设置该头会丢失关键的boundary参数，导致后端无法解析表单结构。需删除手动配置的Content-Type。

2. 文件参数传递错误
   imageInput如果是DOM元素引用，必须传入实际的文件对象而非元素本身，比如通过imageInput.current.files[0]获取（假设用useRef绑定了input元素）。

修正后的客户端代码：

const buttonHandler = (e) => {
  e.preventDefault();
  let formData = new FormData();

  // 传入文件对象而非DOM元素
  formData.append("myImage", imageInput.current.files[0]);
  formData.append("title", title);
  formData.append("description", description);

  async function postData() {
    try {
      const response = await axios(
        "http://localhost:3000/api/requests/postdata",
        {
          method: "POST",
          // 移除手动设置的Content-Type，axios自动处理
          body: formData,
        }
      );
      console.log(response, "数据已成功发送到后端！");
    } catch (e) {
      console.log(e, "请求出错！");
    }
  }

  postData();
};

后端API代码问题及修复 #

1. 缺少multipart数据解析中间件
   你关闭了Next.js默认的bodyParser，但未引入文件上传中间件（如multer）处理表单数据，导致req.body和req.file均为undefined。需安装并配置multer来解析文件与普通表单字段。

2. 未配置文件存储逻辑
   直接访问req.file.path前，需先通过multer配置文件存储路径，确保文件能被正确保存。

步骤1：安装multer

npm install multer
# 或
yarn add multer

步骤2：修正后端API代码

import connectMongoose from "../../../utils/connectMongoose";
import multer from "multer";
import Post from "../../../models/posts";
import fs from "fs";
import path from "path";

// 确保uploads目录存在，避免multer报错
const uploadDir = path.join(process.cwd(), "public/uploads");
if (!fs.existsSync(uploadDir)) {
  fs.mkdirSync(uploadDir, { recursive: true });
}

// 配置multer存储规则
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, uploadDir);
  },
  filename: (req, file, cb) => {
    // 生成唯一文件名，避免重复
    const uniqueSuffix = Date.now() + "-" + Math.round(Math.random() * 1e9);
    const ext = file.originalname.split(".").pop();
    cb(null, `${file.fieldname}-${uniqueSuffix}.${ext}`);
  },
});

const upload = multer({ storage });

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

export default async function handler(req, res) {
  if (req.method !== "POST") {
    return res.status(405).json({ message: "不允许该请求方法" });
  }

  // 用multer解析名为myImage的文件字段
  upload.single("myImage")(req, res, async (err) => {
    if (err) {
      return res.status(500).json({ error: err.message });
    }

    await connectMongoose();
    console.log("已连接数据库（上传接口）！");

    try {
      const post = new Post({
        title: req.body.title,
        // 存储文件的相对访问路径
        myImage: `/uploads/${req.file.filename}`,
        description: req.body.description,
      });
      const savePost = await post.save();

      res.status(200).json(savePost);
    } catch (e) {
      console.log(e, "保存数据出错！");
      res.status(500).json({ error: e.message });
    }
  });
}

额外注意事项 #

• 生产环境建议使用云存储（如AWS S3、阿里云OSS）存储上传文件，避免依赖本地文件系统。
• 若你使用的middlewareHandler是自定义中间件封装，需确保它兼容multer的中间件调用逻辑，否则建议改用上述标准API路由写法。

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