Next.js中如何向API传递图片及表单数据？

你的问题出在FormData的处理方式和前后端数据解析不匹配，下面是具体修正步骤：

前端修正（handleSubmit函数） #

1. 不要用JSON.stringify()处理FormData，直接将FormData作为请求body传入
2. 移除手动设置的Content-Type: application/json，浏览器会自动为FormData添加正确的multipart/form-data请求头
3. 要查看FormData内容，不能直接console.log(formData)，需要用formData.get('字段名')或者遍历的方式

修正后的前端代码：

const handleSubmit = async (e) => {
    e.preventDefault();

    const formData = new FormData()
    formData.append('title', title)
    formData.append('body', richtext)
    formData.append('file', file)

    // 正确查看FormData内容的方式
    console.log('title:', formData.get('title'));
    console.log('body:', formData.get('body'));
    console.log('file:', formData.get('file'));

    const promise = await fetch("http://localhost:3000/api/setblog", {
        method: 'POST',
        // 移除Content-Type，让浏览器自动处理
        body: formData // 直接传FormData，不要转JSON
    })

    const response = await promise.json();
    console.log(response);
};

后端修正（/api/setblog/route.js） #

后端不能用request.json()解析FormData，需要改用request.formData()，然后从返回的FormData对象中提取字段和文件：

修正后的后端代码：

import { NextResponse } from "next/server";

export async function POST(request) {
    // 用formData()解析请求体
    const formData = await request.formData();
    
    // 提取各个字段
    const title = formData.get('title');
    const body = formData.get('body');
    const file = formData.get('file'); // 这里拿到的是File对象

    console.log('title:', title);
    console.log('body:', body);
    console.log('file:', file);

    return NextResponse.json({ title, body, fileName: file?.name });
}

为什么之前会失败？ #

• JSON.stringify(FormData)会返回空对象{}，因为FormData是特殊的表单数据对象，不支持JSON序列化
• 手动设置Content-Type: application/json会让后端误以为请求体是JSON格式，无法正确解析multipart类型的FormData
• 后端用request.json()接收，自然拿不到任何数据

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