form-data로 파일과 객체 보내기

Why?

• 게시판에 글을 등록할 때, 사진이랑 제목, 글의 내용과 여러 데이터를 form-data에 보내야 할 경우가 있을 것이다!

• form-data에 위처럼 키를 여러개 만들어서 모두 넣을 수 있지만 아래처럼 파일 객체 따로 나머지 데이터 전체를 객체에 보내서 서버에서 파싱하게 쓰게 하려면 아래처럼 나머지 데이터를 stringfy해서 보낼 수도 있다!

• 아래처럼 객체를 JSON.stringify해서 나머지 데이터를 보내자!

const handleSubmit = async () => {
  const formData = new FormData();
  formData.append("files", image.image_file);
  formData.append(
    "board",
    JSON.stringify({
      title: title,
      body: text
    })
  );

  await api.post("http://13.125.145.83/api/board", formData);
  window.alert("😎등록이 완료되었습니다😎");
  navigate("/");
};