3월 10일 TIL

Image Uploader

• 프로젝트를 진행하면서 이미지를 직접 업로드하는 컴포넌트 및 함수를 만들어봤다

코드 진행방식

1. Front 웹 브라우저에서 사용자가 Image를 Upload한다
   1-1 업로드한 이미지를 useRef로 감지한다
2. 해당 이미지를 일단 Front에 노출이 가능한 형태의 URL로 변환
3. Preview로 Image를 저장해서 노출
4. useRef를 통해서 얻은 정보를 formData형태로 정리한다
5. BackEnd에서 Image를 업로드하는 API요청으로 Request로 담아 보낸다

타이틀 이미지 업로드 코드

• 우리 프로젝트에선 타이틀 이미지와 유저의 이미지가 분리되어 있기 때문에 함수를 나눴음 ( 로직은 동일 )
  • 타이틀 Image같은 경우는 이미지의 Response로 s3에 업로드한 이미지의 주소를 받아서 블로그가 작성될때 Request에 포함시켜서 넣는 로직을 구현함
  • 주의해야 할점은 BackEnd에서 지정해준 Content-Type을 잘 명시해줘야함

export const titleImageUploader = async (
  file: File,
): Promise<TitleImageUploadResponse> => {
  const formData = new FormData();
  formData.append("image", file);
  
  try {
    const res = await tokenInstance.post("/s3/blog", formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    });
    return {
      imageFileId: res.data.imageFileId,
      imageFileName: res.data.imageFileName,
      imageFileUrl: res.data.imageFileUrl,
    };
  } catch (err) {
    console.error(err)
    throw new Error("서버 에러가 발생했습니다.");
  }
};

프로필 이미지 업로드 코드

• 프로필 이미지같은 경우는 BackEnd에서 자동으로 변경후 적용을 시켜준다고 하셔서 업로드처리가 된 후 Rerode되도록 설정함

export const profileImageUploader = async (
  file: File,
) => {
  const formData = new FormData();
  formData.append("image", file);
  if (file) {
    try {
      const res = await tokenInstance.post("/s3/member", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      });
      return res.data;
    } catch (err) {
      console.log(err);
    }
  }
};