FileReader & File_JavaScrip

정의

FileReader는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는 File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해준다.

메서드

FileReader 객체를 생성한 후 이용하는 메서드

• readAsText(file, [encoding])
  주어진 인코딩( utf-8기본값)을 사용하여 데이터를 텍스트 문자열로 읽는다.
• readAsDataURL(blob)
  바이너리 데이터를 읽고 base64 데이터를 url로 인코딩 한다.
  비동기로 실행된다.
• readAsArrayBuffer(blob)
  이진 형식으로 데이터를 읽는다.
• readAsBinaryString
• onload()
  읽기 동작이 성공적으로 완료되었을 때마다 발생한다. (결과를 처리하는 메소드)
  비동기이므로 원하는 동작을 위해 콜백 함수를 이용하는 것이 좋다
• abort()
  작업을 취소한다

이벤트

• loadstart : 로딩이 시작.
• progress: 읽는 동안 발생.
• load : 오류 없음, 읽기 완료.
• abort : abort()
• error : 오류가 발생.
• loadend : 읽기는 성공 또는 실패.

읽기가 완료되면

• reader.result : 결과
• reader.error : 오류
  가장 널리 사용되는 이벤트는 확실 load하고 error.

사용

new FileReader(fileParts, fileName, [options])

• fileParts– Blob/BufferSource/String 값의 배열.
• fileName– 파일 이름 문자열.
• options– 선택적 객체:
• • lastModified– 마지막 수정의 타임스탬프(정수 날짜).

<input type="file" onchange={readFile}/>
  
  const readFile = e => {
  const reader = new FileReader(); // no arguments
  const file = e.target.files[0];

  alert(`File name: ${file.name}`); // e.g my.png
  alert(`Last modified: ${file.lastModified}`); // e.g 1552830408824
}
  

File()

file 객체의 새로운 인스턴스를 생성
new File(bits, name, [potions])

• bits
  file 객체 내에 저장할 데이터를 나타내는 배열
  ArrayBuffer, ArrayBufferView (en-US), Blob, 문자열을 요소로 제공할 수 있다
• name
  파일의 이름이나 경로를 나타내는 문자열
• options
  파일 특성을 추가로 지정할 수 있는 옵션 객체
• • type: 파일 내용의 MIME 유형을 나타내는 문자열, 기본값은 빈 문자열("")
• • lastModified: 파일이 마지막으로 변경된 시간.
    Unix 시간에서부터 경과한 밀리초 정수로 지정해야 한다. 기본값은 Date.now()와 같다.

 const imageFile = new File(
   [blob], 
   compressedFile.name, 
   { type: 'image/jpeg', lastModified: Date.now() });