使用 NextJS API 的 FormData

Question

我正在尝试使用 NextJS 和 来创建一个简单的 CRUD 应用程序react-redux，所以它的作用是保存人们的联系人。因此，在添加联系人时，我尝试将一些数据和文件一起发送到 NextJS API。

问题

ContactAction.js

从 redux 操作发出POST添加联系人的请求

export const addContact = (data) => async (dispatch) => {
 try {
      var formData=new FormData();
      formData.append('name',data.Name);
      formData.append('email',data.Email);
      formData.append('phone',data.Phone);
      formData.append('image',data.Image);
      let response= await Axios.post(`http://localhost:3000/api/contact/addContact`,formData,{
         headers:{
             'x-auth-token':localStorage.getItem('token')
         }
      });
   } catch (error) {
       console.log(error);
   }
}

添加联系人.js

这是 API 路径/api/contact/

  const handler = async (req, res) => {
   switch(req.method){
    case "POST":{
       await addContact(req,res)
       }
     }
   }
   const addContact = async  (req, res) => { 
     console.log(req.body);
    // do some stuff here and send response
   }

这是我在日志后在终端中得到的内容，而且该文件在日志记录时也是乱码req.files

目前的努力

我尝试使用第三方软件包，例如formidable和formidable-serverless但没有运气。所以一天后我用一个名为 的包让它工作multiparty。

添加联系人.js

  const handler = async (req, res) => {
   switch(req.method){
    case "POST":{
      let form = new multiparty.Form();
      let FormResp= await new Promise((resolve,reject)=>{
       form.parse(req,(err,fields,files)=>{
        if(err) reject(err)
        resolve({fields,files})
        });
      }); 
      const {fields,files} = FormResp;
      req.body=fields;
      req.files=files;
       await addContact(req,res)
       }
     }
   }
   const addContact = async  (req, res) => { 
     console.log(req.body); //Now i get an Object which i can use
    // do some stuff here and send response
   }

上述解决方案显然是多余的，可能不是最好的方法，而且我不想将这 7 8 条线路添加到每条路线中。

我究竟做错了什么？为什么formData似乎不能与 NextJS API 一起使用（当它与 Express 服务器一起使用时）？

Answer 1

这在 next-13 中工作得很好

import { NextRequest, NextResponse } from "next/server";
export async function POST(request: NextRequest, response: NextResponse) {
  console.log(await request.formData())
  return new NextResponse("Thank you")
}

就如此容易 ！

Answer 2

FormData使用multipart/form-data格式。这不是一个简单的POST身体请求。它一般用于上传文件，因此需要特殊处理。作为替代方案，您可以使用JSON.