File -> Blob

기존 이미지 업로드가 Blob 타입을 업로드 하도록 되어있었다. 그래서 File 타입을 Blob으로 변환하는 방법을 찾아보았다.

const imgFile = event.target.files[0];
imgFile.arrayBuffer().then((arrayBuffer) => {
  const blob = new Blob([new Uint8Array(arrayBuffer)], { type: imgFile.type });
  setImageBlob(blob);
});

결과적으론 이렇게 짧은 코드로 변환이 가능했다.

ArrayBuffer: ArrayBuffer 객체는 일반적인 고정 길이 원시 이진 데이터 버퍼를 나타냅니다.
ArrayBuffer는 바이트로 구성된 배열로, 다른 언어에서는 종종 '바이트 배열'이라고 부릅니다. ArrayBuffer에 담긴 정보를 직접 수정하는 것을 불가능하지만, 대신 형식화 배열이나 DataView 객체를 통해 버퍼를ㄹ 특정 형식으로 나타내고, 이를 통해 버퍼의 내용을 읽거나 쓸 수 있습니다. 출처: MDN

File.arrayBuffer(): File을 스트림으로 변환한 후 끝까지 읽습니다. ArrayBuffer로 이행하는 Promise를 반환합니다. 출처: MDN

Unit8Array: 8비트 unsigned integers 배열로 만들어진 타입. 출처: MDN

Blob: blob 객체는 파일류의 불변하는 미가공 데이터를 나타냅니다. 텍스트와 이진 데이터의 형태로 읽을 수 있으며, ReadableStream 으로 변환한 후 그 메서드를 사용해 데이터를 처리할 수도 있습니다. 출처: MDN

File.arrayBuffer()의 프로미스 then()에서 ArrayBuffer 객체가 인자로 들어간다. 그렇게 받은 ArrayBuffer 객체를 Blob의 생성자에 넣으면 Blob 객체가 만들어진다.

파일 업로드할 때 많이 사용될듯 하다.