react로 file 업로드시 오류 해결 log

S3 버켓을 만들어 이미지를 업로드 하는 API를 만들었고 Postman Test시 원활히 업로드에 성공했다.
하지만 React에서 Post 요청을 보낼시에 실패하는 오류에 부딪혔다.

주로 보내는 형식이 잘못됐다는 오류였는데 도저히 찾지 못하다가,
이미지 업로드시 파일 미리보기를 사용하기 위해 FileReader()를 사용한 것을 다시 보게 되었다.

기존에 있던 파일 미리보기 코드

 const [profileImg, setProfileImg] = useState("");
 const profileImgRef = useRef();

...

  const handleChange = () => {
    const file = profileImgRef.current.files[0];
    setFile(file);
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = () => {
      setProfileImg(() => {
        console.log(reader.result);
        return reader.result;
      });
    };
  };

  //프로필 수정하기(post)
  const handleClick = () => {
    //formData 생성
    var formData = new FormData();
    formData.append("profileImg", profileImg);
    formData.append("userNo", userNo);

    axios
      .post("/profile/s3upload", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  };

<label for="file">
	<p id="fileuploadtext">사진 수정하기</p>
  </label>
<input
  type="file"
  name="file"
  id="file"
  onChange={handleChange}
  ref={profileImgRef}
></input>

잘 보면 file을 업로드 한후 그 객체를 FileReader로 읽어 데이터를 URL로 읽은 후 문자열로 변환한 것을 setProfileImg로 넣어주었고, 이를 그대로 axios.post 데이터 안에 넣어주어 형식이 맞지 않다는 오류가 발생한 것이었다:(

fileReader로 변환하기 전 file객체를 담는 useState를 만들어 axios.post의 formdata에 담아 주니 정상적으로 업로드가 되었다.

  const [profileImg, setProfileImg] = useState("");
  const [file, setFile] = useState("");
  const profileImgRef = useRef();

//업로드된 이미지 미리보기
  const handleChange = () => {
    const file = profileImgRef.current.files[0];
    setFile(file);
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = () => {
      setProfileImg(() => {
        //console.log(reader.result);
        return reader.result;
      });
    };
  };

  //프로필 수정하기(post)
  const handleClick = () => {
    //formData 생성
    var formData = new FormData();
    formData.append("profileImg", file);
    formData.append("userNo", userNo);

    axios
      .post("/profile/s3upload", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  };