이미지파일을 Blob 객체로 바꾸어 전송하기

 

put 메소드로 이미지파일 자체를 넣어 요청을 보내야 했다.

프론트에서 파일첨부 후 저장버튼을 눌렀을 때 put 결과는 200으로 성공했다고 뜨는데,

get으로 데이터를 받아오면 엑박이 뜨는 버그가 있었다.

 

처음에는 get메소드의 문제인줄 알았으나

1. DB에도 엑박이 들어가있고

2. postman으로 우겨넣은(?) 이미지는 잘 띄워지는 걸 보고

 

put의 문제인 것을 확인했다.

 

결론부터 말하면,

 

 

수정 전 코드(동작X)

  const onSave = () => {
    if (isClickDelete) {
      deleteCompanyLogo((() => {}) as unknown as void, {
        onSuccess: () => {
          setToastMessage('로고 이미지가 삭제되었습니다.');
          onCloseModal();
        },
      });
    } else {
      const blob = new Blob([logoImageData]);
      const file = new File([blob], 'logo', {
        type: 'image/jpeg',
        lastModified: new Date().getTime(),
      });

      putCompanyLogo([file], {
        onSuccess: () => {
          setToastMessage(t('로고 이미지가 등록되었습니다.'));
          onCloseModal();
        },
      });
    }
  };

 

수정 후 코드(동작O)

  const onSave = async () => { // 달라진 부분(async)
    if (isClickDelete) {
      deleteCompanyLogo((() => {}) as unknown as void, {
        onSuccess: () => {
          setToastMessage('로고 이미지가 삭제되었습니다.');
          onCloseModal();
        },
      });
    } else {
      const blob = await (await fetch(logoImageData)).blob(); // 달라진 부분
      const file = new File([blob], 'logo', {
        type: 'image/jpeg',
        lastModified: new Date().getTime(),
      });
      putCompanyLogo(file, {
        onSuccess: () => {
          setToastMessage(t('로고 이미지가 등록되었습니다.'));
          onCloseModal();
        },
      });
    }
  };