💾 자바스크립트 File 객체

1. File 객체

1. 직접 DOM에 접근하는 방법

// 리액트 hooks 사용
useEffect(() => {
  const fileElem = document.getElementById('fileInput')
  console.log(fileElem.files)
})

return <input type="file" id="fileInput" />

🔽 콘솔 출력화면

2. e.target으로 이벤트가 일어난 위치 DOM 접근

const handleImage = e => {
  console.log(e.target.files)
}

return <input type="file" id="fileInput" onChange={handleFiles} />

🔽 콘솔 출력화면

const file = {
  lastModified: 1580961046732,
  lastModifiedDate: 'Thu Feb 06 2020 12:50:46 GMT+0900 (대한민국 표준시) {}',
  name: 'dom.png',
  size: 192045,
  type: 'image/png',
}

Date 객체타입을 이용하고 싶으면, new Date(lastModified) 방식으로 사용하기!!

해당파일은 192KB 크기임을 알 수 있다.

MIME 타입의 형태는 type/subtype 의 구조를 가지며, 다음과 같은 형태로 쓰인다.

text/plain
text/html
image/jpeg
image/png
audio/mpeg
video/mp4
...

2. URL로 접근

const img = document.createElement('img')
img.src = window.URL.createObjectURL(files[0])
img.onload = function() {
  window.URL.revokeObjectURL(this.src)
}

3. FileReader로 접근

데이터를 일정한 크기로 잘라 서버로 보낼 때 사용.

const reader = new FileReader()

reader.onload = (event: any) => {
  console.log('reader', event.target.result)
}
reader.readAsDataURL(e.target.files[0])

실제 이러한 값으로 출력되며, img.src 값으로 넣어서 사용도 가능하다. 마찬가지로 올린 파일을 다시 다운로드하는 것도 이러한 data URL을 이용하면 된다.

4. Blob 객체

console.log(e.target.files[0] instanceof File) // true
console.log(e.target.files[0] instanceof Blob) // true

const blob = {
  //   lastModified: 1580961046732,
  //   lastModifiedDate: 'Thu Feb 06 2020 12:50:46 GMT+0900 (대한민국 표준시) {}',
  //   name: 'dom.png',
  size: 192045,
  type: 'image/png',
}

코드가 깔끔해서 이해하기 쉬웠다.

const dataURLToBlob = dataURL => {
  const BASE64_MARKER = ';base64,'

  // base64로 인코딩 되어있지 않을 경우
  if (dataURL.indexOf(BASE64_MARKER) === -1) {
    const parts = dataURL.split(',')
    const contentType = parts[0].split(':')[1]
    const raw = parts[1]
    return new Blob([raw], {
      type: contentType,
    })
  }
  // base64로 인코딩 된 이진데이터일 경우
  const parts = dataURL.split(BASE64_MARKER)
  const contentType = parts[0].split(':')[1]
  const raw = window.atob(parts[1])
  // atob()는 Base64를 디코딩하는 메서드
  const rawLength = raw.length
  // 부호 없는 1byte 정수 배열을 생성
  const uInt8Array = new Uint8Array(rawLength) // 길이만 지정된 배열
  let i = 0
  while (i < rawLength) {
    uInt8Array[i] = raw.charCodeAt(i)
    i++
  }
  return new Blob([uInt8Array], {
    type: contentType,
  })
}

5. 마치며

6. reference