[TIL] 이미지 크기 줄여서 업로드하기.

1. 선택한 파일이 이미지가 맞는지 확인.

 const isImg = (uploadImg) => {
          let type = uploadImg.type.toString();
          if (type.includes("image")) {
            return true;
          } else {
            alert("*이미지 파일만 등록할 수 있습니다.");
            return false;
          }
        };

2. 높이 고정값 125, 그에 따른 비율로 width 로 조정해 이미지 크기 및 용량 조정.
3. 업로드하려는 파일의 미리보기 저장.

  const handleFileInputChange = useCallback(
    (e) => {
      try {
        let deletedImageForm = {
          ...formData,
          wk_image: null,
        };
        setFormData(deletedImageForm);
        let uploadImg = e.target.files[0];
       
     if (uploadImg && isImg(uploadImg)) {
          const resizedImg = document.createElement("img");
          resizedImg.src = URL.createObjectURL(uploadImg);
          // 이미지가 로드되면 canvas를 원하는 크기로 만들고 이미지를 그에 맞춰 그립니다.
          resizedImg.onload = () => {
            // alert(resizedImg.width); 원본 파일의 사이즈
            // alert(resizedImg.height); 원본 파일의 사이즈
            URL.revokeObjectURL(resizedImg.src);
            const per_width = (resizedImg.width / resizedImg.height) * 125;
            const canvas = document.createElement("canvas");
            canvas.width = per_width;
            canvas.height = 125;
            const context = canvas.getContext("2d");
            context.drawImage(resizedImg, 0, 0, per_width, 125);
            // canvas에 그려진 이미지를 Blob으로 만들고 다시 File로 만들어 배열에 저장합니다.
            context.canvas.toBlob(
              (newImageBlob) => {
                setFiles({
                  selectFile: new File([newImageBlob], uploadImg.name),
                });
              },
              "image/png",
              0.5
            );
            //미리보기
            const reader = new FileReader();
            reader.readAsDataURL(uploadImg);
            reader.onloadend = (finishedEvent) => {
              const {
                currentTarget: { result },
              } = finishedEvent;
              setImagePreview(result);
            };
          };
        }
      } catch (e) {
        console.log("handleFileInputChange", e);
      }
    },
    [formData]
  );

시간이 없어 코드를 가다듬지는 못했다.

다음 프로젝트에서 사용할 때 다시금 가다듬을 예정이다.