[image] 이미지 업로드

결과

설명

• 이미지 파일을 readAsDataURL로 읽어서(base64로 인코딩한 string 데이터) img 태그에 src에 넣어서 클라이언트에게 미리 보여줄 이미지의 경로
• readAsDataURL은 비동기로 실행된다
• file을 비동기로 읽기 위한 FileReader 객체를 생성하고, onload 이벤트를 달아준다. 이후 readAsDataURL(file)을 통해 onload를 트리거 시킨다.
• onload 함수는 FileReader가 이미지를 잘 인코딩하고 난 후의 결과를 처리하는 함수이다!
  • 주의할 점, 만약 이미지를 업로드하고 삭제버튼을 클릭하지 않은 후에 업로드 버튼을 클릭하고 취소 버튼을 클릭하면 오류가 발생하는데 이를 방지하기 위해서 if(file)으로 조건문을 걸었다

코드

const file = e.target.files[0];
    const fileReader = new FileReader();

    if (file) {
      const maxSize = 10 * 1024 * 1024; // 10MB
      const passType = ['image/png', 'image/jpeg'];
      const compression = 1 * 1024 * 1024;

      if (file.size > maxSize || !passType.find(element => element === file.type)) {
        alert('업로드 이미지는 10MB 이하의<br>이미지(JPG, PNG)만 등록할 수 있어요');
        e.target.value = '';
        return;
      }

      //사이즈가 크면 압축
      if (file.size >= compression) {
        const options = {
          maxSizeMB: 1,
          maxWidthOrHeight: 1280,
          useWebWorker: true
        };
        //(imageFile, options)
        const compressedFile = await imageCompression(file, options);
        fileReader.readAsDataURL(compressedFile); //압축 후 이미지 파일 읽기

        fileReader.onload = async () => {
          const byteString = Buffer.from(fileReader.result.split(',')[1], 'base64'); // Uint8Array로 리턴
          const blob = new Blob([byteString], {
            //base64를 jpeg로 변환?
            type: 'image/jpeg'
          });
          //file 객체의 새로운 인스턴스를 생성 (bits(blob), name(파일 이름이나 경로), [potions])
          const imageFile = new File([blob], compressedFile.name, { type: 'image/jpeg', lastModified: Date.now() });

          setTemplate({ file: imageFile, previewUrl: fileReader.result });
          imageRequestHandler(file);
        };
      } else {
        fileReader.readAsDataURL(file);
        fileReader.onload = () => {
          setTemplate({ file: file, previewUrl: fileReader.result });
          imageRequestHandler(file);
        };
      }
    } else {
      //파일 선택 취소시 이전 상태값 유지
      setTemplate({
        file: template.file,
        previewUrl: template.previewUrl
      });

      return;
    }