<Error Handling> 파일 업로드

imgbb Api를 통한 이미지 업로드

한개의 이미지 업로드를 구현

이미지 업르드를 구현하는 중 FormData라는 파일 전달 객체를 처음 접했다.
FormData는 객체 형식으로 key값과 value값이 있는데
그냥 콘솔에 찍었을 때는 FormData()로만 나오기 때문에

for (let value of formData.values()) {
  console.log(value);

이런식으로 확인 해야 한다.

const formData: any = new FormData(); //파일을 전달할때는 formData를 써야함
    formData.set("key", "97752c84b8e085bd2b5d5a78368f1cd0"); // imgbb에 key값과 파일을 필수적으로 보내줘야함
      formData.append("image",event.target.files[0]);
    }

imgbb의 문서에 따르면 API key값과 파일을 바디로 전달해줘야하기때문에 위와 같이 코드를 작성하였다.
이 후 imgbb에 포스트 요청을 하여 이미지의 url값을 받아오기 위해 포스트 요청을 작성하였다. 이 때 이미지 파일을 보내기 위해서는 headerd에 "Content-Type": "multipart/form-data"를 꼭 적어줘야 한다.

axios
       .post("https://api.imgbb.com/1/upload", formData, {
         headers: {
           "Content-Type": "multipart/form-data",
         },
       })
       .then((res) => console.log(img.concat(res.data.data.url)));
 };

이렇게 하나의 파일을 올렸을 때는 해결을 했는데... 문제는 여러개의 파일을 업로드 하고자 했을 때를 헤매는 중이다..

여러개의 이미지 업로드를 구현

const formData: any = new FormData(); //파일을 전달할때는 formData를 써야함
    formData.set("key", "97752c84b8e085bd2b5d5a78368f1cd0"); // imgbb에 key값과 파일을 필수적으로 보내줘야함
    for (let i = 0; i < event.target.files.length; i++) {
      formData.append("image", event.target.files[i]);
    }

이렇게 작성하면 formData에서 value값을 확인했을 때 분명히 선택한 파일들이 모두 뜨는 데 포스트 요청을 하면 파일중 마지막 하나만 응답으로 오는 것을 확인할 수 있다.

axios
        .post("https://api.imgbb.com/1/upload", formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => console.log(img.concat(res.data.data.url)));
  };

이렇게 formData의 value값을 콘솔에 찍어보면

File {name: '스크린샷_2022-03-16_오전_10.41.39-removebg-preview.png', lastModified: 1647394929973, lastModifiedDate: Wed Mar 16 2022 10:42:09 GMT+0900 (한국 표준시), webkitRelativePath: '', size: 39287, …}
File {name: '스크린샷_2022-03-16_오전_11.34.43-removebg-preview.png', lastModified: 1647398092454, lastModifiedDate: Wed Mar 16 2022 11:34:52 GMT+0900 (한국 표준시), webkitRelativePath: '', size: 104790, …}

이렇게 선택한 모든 파일들이 나오는데
포스트 요청한 후 받은 응답을 보면 하나의 파일에 해당하는 데이터만 받아오는 것을 확인 할 수 있다.

['https://i.ibb.co/X4BxcGQ/2022-03-16-10-55-51-removebg-preview.png']

그래서 지금부터 그거에 대한 원인을 찾아보려고 하는데 너무 막막하다....