[JS] FileReader로 이미지 파일 업로드하기

[JS] 이미지 파일 업로드 에서 사용하는 FileReader 를 정리해보자

1. FileReader

const reader = new FileReader();

 

⭐ FileReader 객체는 웹 어플리케이션이 파일을 비동기적으로 읽을 수 있게 해주는 역할을 합니다. 이 객체를 사용하면 웹 페이지에서 파일을 읽어와서 처리할 수 있습니다.

2. FileReader.readAsDataURL()

const selectedFile = fileInput.files[0];

  if (selectedFile) {
    // 파일을 데이터 URL로 읽기 시작
    reader.readAsDataURL(selectedFile);
  }

 

⭐ readAsDataURL 메서드는 파일의 내용을 데이터 URL 읽어와 Base64로 인코딩하여 FileReader.result에 데이터 URL로 반환합니다.

⭐⭐ readAsText 메서드는 파일의 내용을 텍스트로 읽어와 텍스트 문자열로 반환합니다. 

 

3. FileReader.onload()

// 파일 읽기가 완료되면 실행되는 이벤트 핸들러
reader.onload = function () {
  // 읽은 데이터 URL을 콘솔에 출력하거나 다른 작업 수행
  const dataURL = reader.result;
  console.log('읽은 데이터 URL:', dataURL);

  // 여기에서 dataURL을 활용하여 이미지를 표시하거나 다른 작업을 수행할 수 있음
  // 예를 들어, 이미지를 표시하는 img 요소의 src 속성에 할당할 수 있음
  // imageDisplay.src = dataURL;
};

 

⭐ FileReader.onload()는 FileReader 객체에서 파일 읽기 작업이 성공적으로 완료되었을 때 호출되는 이벤트 핸들러입니다. 이벤트 핸들러 내부의 코드는 파일 읽기 작업이 완료된 후에 실행됩니다.

⭐ onload 메서드에 함수를 작성하 코드 흐름을 제어할 수 있습니다.

---

 위 함수들을 활용한 예제 : 이미지를 선택하면 이미지가 화면에 출력된다!

See the Pen Untitled by 무지 (@enmoathv-the-vuer) on CodePen.