[Nextjs] fromdata 데이터 가져오기 / cause: Error: Multipart: Boundary not found

Nextjs에서 post로 보낸 api reqest에서 from-data 형식으로 데이터 가져오는방법

export async function POST(req: Request) {
  let formData = await req.formData();
}

 

 

 

cause: Error: Multipart: Boundary not found 에러 해결 방법

const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
      const f = new FormData();
      f.append("image", image);
      const response = await fetch("/api/new", {
        method: "POST",
        headers: {
          "Content-Type": "multipart/form-data",
        },
        body: f,
      });
};
... 
 return (
 <form
    onSubmit={onSubmit}
  >
    <input type="file" onChange={handleFileChange} />
    <input type="submit" value={"Publish"} />
  </form>
  )

위와 같이 form태그에서 이벤트를 event.preventDefalut()로 막고
form-data형식으로 보낸 후

 

 

export async function POST(req: Request, res: NextResponse) {
  let formData = await req.formData();
  let body = Object.fromEntries(formData);
  console.log(body);

  return new Response("Hello, Next.js!");
}

api에서 formData()로 받아오면

cause: Error: Multipart: Boundary not found에러가 발생

 

 

 

 

해결방법

 

<form
        onSubmit={onSubmit}
        encType="multipart/form-data"
>

 

1. form 태그에 encType="multipart/form-data"을 추가하고

 

2. 헤더의

    // headers: {
    //   "Content-Type": "multipart/form-data",
    // },

를 비활성화 하자.

 

formdata와 object로 변환후 console