[React] 리액트에서 이미지 파일과 json data를 함께 formData에 넣어 전송(post)

회원가입페이지를 만들면서 회원정보와 프로필사진(이미지 파일)을 함께 formData에 보내주어야 하는 경우가 생겼다. 

 

FormData은 HTML 폼 데이터로, 폼의 각 필드와 값을 나타내는 키/값 쌍들의 집합을 쉽게 구성할 수 있는 방법을 제공한다. 바디에 FormData 객체를 넣으면, HTTP 메시지는 인코딩되고, Content-Type 속성은 multipart/form-data로 지정한 후에 데이터가 전송된다. 

 

FormData에 ”profile”과 ”signup”에 각각 파일과 이메일 닉네임, 등의 데이터를 담아 보냈더니 에러가 발생했다. 알고보니 파일은 multipart/form-data로, 그 외 json 데이터들은 application/json 형식으로 따로 보내야했다.

 

Blob(Binary Large Object, 블랍)은 바이너리 형태중에서도 큰 객체를 의미하는데, 이미지, 비디오 사운드와 같은 멀티미디어 데이터를 다룰 때 사용된다.

따라서 file은 multipart/form-data, data는 application/json 형식으로 보내기 위해 Blob을 사용했다.

 

  // 회원가입버튼 클릭
  const signupButtonHandler = (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("profile", profileImg);

    const signup = {
      nickName,
      gender,
      role,
      password,
      email,
    };
    formData.append(
      "signup",
      new Blob([JSON.stringify(signup)], { type: "application/json" })
    );

    if (signupActive) {
      if (!isemailChecking) {
        alert("이메일 인증을 완료해주세요!");
        return;
      }
      signupMutation.mutate(formData);
    } else {
      alert("회원정보를 모두 입력해주세요!");
    }
  };