TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'. 에러

input을 통해 이미지 업로드시, 이미지 선택 후 취소 버튼을 누르면 나는 오류였다 input에 걸려있는 함수는 그대로 작동을 하지만, 실제로 파일이 없기에 에러가 뜨는 실수였다

 

 

오류가나는 코드

      

      

      

    
    

      <javascript />
    
  const onChangeImage = (e) => {
    const reader = new FileReader();
    const file = imgRef.current.files[0];
    reader.readAsDataURL(file);
    reader.onloadend = () => {
      setImage(reader.result);
    };
    if (e.target.files[0]) {
      //서버에 보내는 코드
      const userImage = new FormData();
      //백엔드에서 이미지를 어떻게 받고있는지 확인후 이름수정
      userImage.append("userImage", e.target.files[0]);
    }
  };

 

 

수정코드

      

      

      

    
    

      <javascript />
    
const onChangeImage = (e) => {
    const reader = new FileReader();
    const file = imgRef.current.files[0];
    //  if (e.target.files.length === 0) return;
    if (e.target.files[0]) {
      reader.readAsDataURL(file);
      reader.onloadend = () => {
        setImage(reader.result);
      };
      //서버에 보내는 코드
      const userImage = new FormData();
      //백엔드에서 이미지를 어떻게 받고있는지 확인후 이름수정
      userImage.append("userImage", e.target.files[0]);
    }
  };