[JS] Blob, File, URL 다루기

Blob, File, URL

File, Blob, 그리고 URL은 웹 애플리케이션에서 파일과 데이터를 표현하고 다루는 데 사용되는 개념들이다.

Blob

Blob은 일련의 데이터를 나타내는 객체다. Blob은 Binary Large Object의 약자로, 텍스트나 이미지, 오디오, 비디오 등과 같은 다양한 종류의 데이터를 처리할 수 있다. File 객체는 Blob 객체의 하위 클래스로 볼 수 있다.

File

File은 사용자의 로컬 파일 시스템에서 선택한 파일을 나타내는 객체다. 일반적으로 파일 업로드나 파일 조작을 위해 사용된다. File 객체는 Blob 객체를 상속하며, 파일의 이름, 크기, 타입 등의 추가적인 정보를 가지고 있다.

	File	Blob
설명	파일 데이터 컨테이너 및 추가 메타데이터 포함	이진 또는 텍스트 데이터 컨테이너
상속	Blob을 상속함	N/A
사용법	파일 처리 및 업로드 등 파일 관련 작업에 사용	데이터 컨테이너로 사용
소스	일반적으로 사용자 입력에서 얻어진 파일의 객체	이진 데이터 또는 텍스트 데이터
메타데이터	파일 이름, 크기, 유형 등의 메타데이터 포함	추가 메타데이터 없음
메서드	Blob의 메서드 상속 + 파일 관련 메서드	slice(), stream(), text(), arrayBuffer()
사용 예시	사용자가 선택한 파일 처리, 파일 조작 등	이미지 업로드, 이진 데이터 처리

URL

URL은 웹 리소스의 주소를 나타내는 문자열이다. URL은 createObjectURL()을 사용하여 Blob 또는 File 객체를 URL로 변환할 수 있다. 변환된 URL은 해당 Blob 또는 File 객체를 가리키는 유효한 주소로 사용될 수 있다.

ArrayBuffer

ArrayBuffer는 고정된 길이의 이진 데이터 버퍼를 나타내는 JavaScript의 내장 객체입니다.

예를 들어, 이미지, 오디오, 비디오, 파일 등과 같은 바이너리 데이터는 ArrayBuffer를 사용하여 메모리에 할당된 버퍼에 저장됩니다. ArrayBuffer의 크기(고정된 길이)는 생성할 때 지정됩니다. 크기는 바이트 단위로 지정되며, 0 이상의 정수로 설정할 수 있습니다. 예를 들어, new ArrayBuffer(16)은 16바이트 크기의 ArrayBuffer를 생성합니다.

Uint8Array, Int16Array, Float32Array 등의 TypedArray를 사용하여 ArrayBuffer의 버퍼를 읽고 쓸 수 있습니다. 이러한 TypedArray는 ArrayBuffer의 메모리 버퍼를 특정 데이터 형식으로 해석하고 조작할 수 있도록 도와줍니다.

 

TypedArray의 예시

Int8Array	1 byte	부호 있는 8비트 정수 값을 다룰 때 사용
Uint8Array	1 byte	부호 없는 8비트 정수 값을 다룰 때 사용
Uint8ClampedArray	1 byte	0에서 255 사이의 부호 없는 8비트 정수 값을 다룰 때 사용
Int16Array	2 bytes	부호 있는 16비트 정수 값을 다룰 때 사용
Uint16Array	2 bytes	부호 없는 16비트 정수 값을 다룰 때 사용
Int32Array	4 bytes	부호 있는 32비트 정수 값을 다룰 때 사용
Uint32Array	4 bytes	부호 없는 32비트 정수 값을 다룰 때 사용
Float32Array	4 bytes	32비트 단정밀도 부동소수점 값을 다룰 때 사용
Float64Array	8 bytes	64비트 배정밀도 부동소수점 값을 다룰 때 사용
BigInt64Array	8 bytes	64비트 부호 있는 정수 값을 다룰 때 사용 (BigInt 형식)
BigUint64Array	8 bytes	64비트 부호 없는 정수 값을 다룰 때 사용 (BigInt 형식)

 

File, Blob, URL, ArrayBuffer 간 변환 방법

1. File → Blob

이 경우엔 별도의 과정이 필요없다. File 객체가 Blob 객체를 상속하기 때문에 바로 Blob으로 사용할 수 있다.

// File to Blob
const file: File = /* 로컬 파일 선택 등을 통해 얻은 File 객체 */;
const blob: Blob = file;

 

2. Blob → File

new File()을 사용하여 Blob 객체를 감싸면 된다. File 생성자의 첫 번째 매개변수로 Blob 객체 또는 Blob 배열을 전달하고, 파일 이름과 MIME 타입을 지정한다.

// Blob to File
const blob: Blob = /* 데이터 등을 통해 얻은 Blob 객체 */;
const fileName: string = 'example.txt';
const fileType: string = 'text/plain';
const convertedFile: File = new File([blob], fileName, { type: fileType });

 

3. File/Blob → URL

URL.createObjectURL()을 사용하면 된다. 이 메서드는 Blob 또는 File 객체를 매개변수로 받아서 해당 객체를 가리키는 URL을 생성한다.

// File/Blob to URL
const blob: Blob = /* 데이터 등을 통해 얻은 Blob 객체 */;
const url: string = URL.createObjectURL(blob);

 

4. URL → Blob

fetch()를 사용하여 URL로부터 데이터를 가져온 다음, response.blob()을 호출하여 Blob 객체로 변환하면 된다. 이를 통해 URL로부터 파일의 데이터를 비동기적으로 가져올 수 있다.

// URL to Blob
const url: string = /* URL */;
const response = await fetch(url);
const blob = await response.blob();

 

5. ArrayBuffer → Blob

ArrayBuffer를 사용하여 데이터를 생성한 후, Blob 객체로 변환할 수 있다.

// ArrayBuffer to Blob
const arrayBuffer: ArrayBuffer = /* 데이터 등을 통해 얻은 ArrayBuffer */;
const blob = new Blob([arrayBuffer]);

 

6. File/Blob → ArrayBuffer

Blob 또는 Blob을 ArrayBuffer로 변환하기 위해서는 FileReader를 사용하여 비동기적으로 데이터를 읽어와야 한다.

// File/Blob to ArrayBuffer
const blob: Blob = /* 데이터 등을 통해 얻은 Blob 객체 */;
const fileReader = new FileReader();

fileReader.onload = function(event) {
  const arrayBuffer = event.target.result;

  // ArrayBuffer를 사용한 데이터 처리 로직
  // 이미지 데이터의 픽셀 값을 읽거나, 오디오 데이터를 재생하거나, 파일 형식을 파싱하는 등..
};

fileReader.readAsArrayBuffer(blob);

 

7. URL → ArrayBuffer

// URL to ArrayBuffer
const urlToBuffer = async(url) => {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const arrayBuffer = await response.arrayBuffer();
    return arrayBuffer;
  } catch (error) {
    // 에러 처리
    console.error('Error:', error);
    return null;
  }
}

const url: string = /* URL */;
const arrayBuffer = await urlToBuffer(url);
if (arrayBuffer) {
  // ArrayBuffer를 사용한 데이터 처리 로직
  // 이미지 데이터의 픽셀 값을 읽거나, 오디오 데이터를 재생하거나, 파일 형식을 파싱하는 등..
}

 

 

출처 :

https://www.jeong-min.com/39-file-blob-url-arraybuffer/

https://velog.io/@dusunax/File-Blob-ArrayBuffer-TypedArrayUint8Array