[ Project ] FormData ( File과 Json data를 함께 )

 

진행 중인 프로젝트에서 유저 정보 변경 항목에는 이미지, 이름, 자기소개 세 가지가 있습니다.

세 가지 각각 Update API가 존재하는 것이 아닌 하나의 API로 이미지, 이름, 자기소개를 Update하게 됩니다. 

이미지는 File 타입이고 이름과 자기소개는 application/json 타입의 데이터인데
어떻게 서로 다른 타입의 데이터를 함께 보낼 수 있는지에 대한 문제를 해결해 나아가는 글이 되겠습니다 😊

 

 

백엔드 : dto 데이터는 application/json 타입으로 넘겨주셔야 해요 ! 

 

Postman API 테스트

Postman으로 API 테스트를 했을 때, Request Body에 'dto'에는 application/json 타입의 객체 데이터가 들어가고
'img'에는 multipart/form-data 타입의 이미지 데이터가 필요합니다.
여기서 난관에 봉착하게 되었는데 ..

const formData = new FormData();
formData.append(
    "dto",
    JSON.stringify({
      id: memberId,
      nickname: nameValue,
      about: aboutValue,
    }),
);

formData.append("img", imgFile!);

 

dto에 application/json 타입이라는 것을 어떻게 명시해야 하는지 알 수가 없어서 일단 위와 같은 코드로 시도했습니다.

( 당연 에러 발생.. )  

 

Blob 객체 

오랜 시간 구글 검색으로 Blob 객체 키워드를 알게 됐습니다.

Blob 객체를 사용해서 form-data에 이미지와 application/json 타입의 데이터를 함께 보낼 수 있습니다. 

new Blob(array, options);

array에는 Blob의 데이터를 구성할 데이터를 options에는 데이터의 MIME 유형을 넣으면 됩니다. ( MDN Blob 글 )

 

 

Code

const formData = new FormData();
formData.append(
	"dto",
    new Blob(
      [
        JSON.stringify({
          id: memberId,
          nickname: nameValue,
          about: aboutValue,
        }),
      ],
      { type: "application/json" }
    )
);
formData.append("img", imgFile);