[React] 이미지 업로드 시 이미지 압축

 

 

이미지 업로드시 이미지 압축

 

프로젝트 리팩토링을 하는 과정에서 이미지를 등록할 때 제한이 없었어서 용량 제한을 걸어주었었다.

하지만 사용자 입장에서 불편함이 느껴져서 차라리 사용자는 자유롭게 업로드를 하고

프론트에서 압축을 해서 서버에 보내주는 방법으로 변경을 하게 되었다.

 

 

browser-image-compression 라이브러리 사용

 

const actionImgCompress = async (fileSrc) => {
  const options = {
    maxSizeMB: 1,
    maxWidthOrHeight: 1920,
    useWebWorker: true,
  };
  
  try {
    return await imageCompression(fileSrc, options);
  } catch (error) {
    alert(error);
  }
};

const handleFileChange = async (e) => {
    let fileBlob = e.target.files[0];

    if (!fileBlob) {
      return;
    }

    // 1MB 보다 크다면 변환
    if (fileBlob.size > 1024 * 1024) {
      fileBlob = await actionImgCompress(fileBlob); // Blob 파일
    }

    const reader = new FileReader();
    reader.readAsDataURL(fileBlob);
    reader.onload = () => {
      setImageSrc(reader.result); // preview 이미지
      onChange(reader.result);
    };
};

 

옵션 값을 정해주고 파일의 src와 지정한 옵션을 전달해주면 압축된 Blob파일로 돌려준다.

미리보기 이미지를 위해 Blob파일을 text로된 Base64코드로 변환해주어야 하는데,

FileReader의 readAsDataUrl을 이용하여 변환할 수 있다.

 

* 참고로 Blob파일로 변환할 땐 비동기로 변환되기 때문에 await을 사용해주어야 한다.