FormData를 이용해 이미지 파일 전송

api명세서를 이용해 백엔드에 이미지 파일을 전송하는 로직 구현

setFile을 porps로 보내 자식 컴포넌트의 input이 onChange 되었을 때
값을 구분해 파일 형식으로 또는 텍스트 형식으로 가져와 file에 넣어주는 로직 구현

  const [file, setFile] = useState(null);

  const onClickEvent = async () => {
    const formData = new FormData();
    formData.append("img", file.img);
    console.log([...formData]);
    const response = await fetch(
      `${process.env.REACT_APP_API_URL}/user/profile-img`,
      {
        method: "PUT",
        headers: {
          "Content-Type": "multipart/formdata",
          Authorization: cookie.token,
        },
        body: formData,
      }
    );
    const result = await response.json();

    if (result.status === 200) {
      console.log(result);
      navigate("/profile");
    } else {
      alert(result.message);
    }
  };

  const onChangeEvnet = (e, key) => {
    const value = e.target.type === "file" ? e.target.files : e.target.value;

    setInputValues({ ...inputValues, [key]: value });
  };

명세서에 적혀있는대로 body에 img,file의 형식으로 넣어주었으나

파일 형식이 맞지 않는다는 에러가 남

원인

const send = document.querySelector("#send");

send.addEventListener("click", async () => {
  const formData = new FormData();
  formData.append("username", "Groucho");
  formData.append("accountnum", 123456);

  // A file <input> element
  const avatar = document.querySelector("#avatar");
  formData.append("avatar", avatar.files[0]);

  // JavaScript file-like object
  const content = '<q id="a"><span id="b">hey!</span></q>';
  const blob = new Blob([content], { type: "text/xml" });
  formData.append("webmasterfile", blob);

  const response = await fetch("http://example.org/post", {
    method: "POST",
    body: formData,
  });
  console.log(await response.json());
});

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects

공식 문서에 .files[0]로 배열 안에 file을 선택해 보내주어야 했음

  const onChangeEvnet = (e, key) => {
    const value = e.target.type === "file" ? e.target.files[0] : e.target.value;

    setInputValues({ ...inputValues, [key]: value });
  };

문제 해결 완료