리액트 사진 post, get (multipart/form-data)

이번 프로젝트를 하면서 중고거래, 추천게시판에는 글 작성시 사진 첨부가 가능하도록 해야했다.

post 과정에서 애를 먹었는데 그 이유는

http://localhost:8080/gathering?title=제목&&content=내용&&category=맛집
이런식으로 title, content, category는 링크 뒤에 작성하고
이미지 파일은 multipart/form-data 형식으로 전송(여러장 전송 가능)

이렇게 api가 주어졌어서 title, content, category는 url 뒤에 값을 붙여서 post를 해줘야하고 사진은 또 폼데이터로 보내야한다고 생각했다.
그래서 어떻게 두가지 형태를 동시에 post를 하지?
하고 멘붕이었다.

하지만 그냥 title, content, category 모두 폼데이터로 보내도됐다!
ㅎㅎ... 괜히 삽질했다.

const onSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("file", files.length && files[0].uploadedFile);
     formData.append("title",bestTitle);
    formData.append("content", bestTitle);
    formData.append("category",showCategory);
    for(let i = 0; i < FileElement.files.length; i++){
      formData.append("file", FileElement.files[i]);
  }
    axios
      .post(
        "/recommend-posts",
        formData,
        {headers: {
          
          Authorization: `Bearer ${localStorage.getItem("accessToken")}`
        }}
      )
      .then((res) => {
        alert("글이 정상적으로 작성되었습니다.");
        console.log(res.data);
        if (res.data) {
          navigate("/best");
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };

이런식으로 FormData 객체를 만들어주고 title, content, category, file을 넣어준다음 이 객체를 post해주면 된다!

올린 사진을 get해오는 것도 쉽지 않았다.
먼저 글 정보를 불러온다음 글이 잘 불러와졌다면 그 때 사진을 get했다.
그 이유는 사진을 불러오기 위해서는 api에 best 객체에 있는 photoIds[]배열 값을 붙여줘야 하는데 글이 일단 불러와져야 best객체가 set되기 때문에 best객체를 먼저 set해주고 나서 photo를 불러올 수 있었다.

사진의 경우에는 responseType을 지정해줘야 제대로 받은 수 있었다. blob타입으로 받고 이걸로 url을 만들어 image변수에 넣고 이를 img 태그에 경로로 설정해주었다.

 const [image, setImage] = useState();
  useEffect(() => {
    axios
      .get("/recommend-posts/" + id, {
        headers: {
          Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
        },
      })
      .then((res) => {
        console.log(res.data);
        setBest(res.data);
        axios({
          method: "GET",
          url: "/photo/" + res.data.photoIds[0],
          responseType: "blob",
          headers: {
            Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
          },
        })
          .then((res) => {
            console.log(res.data);
            setImage(
              window.URL.createObjectURL(
                new Blob([res.data], { type: res.headers["content-type"] })
              )
            );
          })
          .catch((err) => {
            console.log(err);
          });
      })
      .catch((err) => console.log(err));
  }, [useParams()]);

다음엔 여러장의 사진을 post, get하는 법을 들고오겠다.