FormData로 파일 업로드하고 서버로 전송하기

FormData란?

게시글에 이미지 또는 동영상 업로드, 프로필 사진 업로드 등과 같은 복잡한 데이터 전송을 보다 쉽게 다룰 수 있게 해주는 것이 FormData입니다.
이러한 FormData 객체는 키-값 쌍의 데이터를 저장하며, 각 쌍은 폼 필드의 이름과 해당 필드의 값으로 구성됩니다. 이 때, 값은 문자열 또는 Blob 객체(파일 업로드 시)가 될 수 있습니다.
FormData는 네트워크 요청 시에 헤더와 본문을 자동으로 구성하고 서버에 전송할 수 있는 형태로 데이터를 가공합니다.

FormData를 활용 한 파일 업로드 구현

1. FormData에 담을 변수 생성

// image파일을 제외한 값을 담은 변수
const [requestDto, setRequestDto] = useState({
  title: "",
  introduce: "",
  select: "",
  authentication: "",
  member: 3,
  money: "",
  startTime: "",
  endTime: "",
  startDate: "",
  endDate: "",
});

// image파일을 담을 변수
const [image, setImage] = useState(null);

2. 서버로 전송하기

Blob이란?

아래 코드에서 사용된 Blob객체는 JSON 데이터를 FormData에 추가하는 방식으로 사용되었습니다. JSON데이터를 Blob으로 변환하는 이유는 JSON데이터와 이미지 파일을 함께 전송하기 위함입니다. 서버에서 JSON데이터를 별도의 형식으로 요구하거나 이미지 파일과 JSON 데이터를 별도의 방식으로 처리하는 경우에는 Blob을 사용하지 않아도 문제가 없을 수 있습니다.

const 함수명 = () => {
    // 새로운 FormData 객체 생성
    const FormData = new FormData();
    // 이미지 파일 첨부
    FormData.append("file", image);
    FormData.append(
      "requestDto",
      // JSON 형식의 requestDto 객체를 Blob 객체로 만들어서 FormData에 첨부
      new Blob([JSON.stringify(requestDto)], { type: "application/json" }),
    );
    api
      .post("본인 api 주소", FormData, {
        headers: {
          Authorization: `Bearer ${본인 토큰}`,
          // FormData를 사용하는 것을 명시
          "Content-Type": `multipart/form-data`,
        },
      })
      .then((res) => {
        // 본인이 작성할 코드
      })
      .catch((error) => {
        // 본인이 작성할 코드
  };

정리

제가 작성했던 코드를 토대로 간단하게 FormData를 활용한 파일 업로드 방범에 대해 정리해봤습니다.
저는 서버에서 JSON데이터와 파일을 한번에 전송해야하게끔 만들었기때문에, 위 설명과 같이 Blob 형태로 변환을 했습니다.이 부분은 백엔드 개발자분들과 상의하면서 수정하시면 될 것 같습니다.

설명도 이상하고 코드도 이상한 글임에도 읽어주셔서 감사합니다. : )