[Node.js] fetch로 파일 전송시 발생한 Missing boundary in multipart 에러 해결 방법

Nodejs 클라이언트 컴포넌트에서 fetch로 백엔드 서버에 파일을 전송하려고 하는 상황에서 다음과 같은 에러가 발생했습니다. 

 

{"detail":"Missing boundary in multipart."}

 

 

이런 경우에는 form 태그에 encType="multipart/form-data"를 넣어주고, 헤더에서 'Content-Type': 'multipart/form-data'를 빼주면 문제가 해결됩니다. 

 

"use client"

import { useRouter } from 'next/navigation';

export function UploadImage() {
    const router = useRouter();
    return (
        <form onSubmit={(e)=>{
            e.preventDefault();
            const myimage = e.target.myimage.files[0];
            const formData = new FormData();
            formData.append('file', myimage);

            const options = {
                method: 'POST',
                credentials: "include",
                body: formData
            }
            fetch(process.env.NEXT_PUBLIC_API_URL + `v1/coloring/uploadfile`, options)
                .then(res=>res.json())
                .then(result=>{
                    console.log("이미지 업로드 성공");
                    console.log("result: ", result);
                    router.refresh();
                })
    }} encType="multipart/form-data">
        <p>
            <input type="file" id="myimage" name="myimage" accept="image/png, image/jpeg"></input>
            <br></br>
            <input type="submit" value="제출"></input>
        </p>
    </form>
  )
}

 

참고자료

[1] https://curryyou.tistory.com/466