Blob

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

Blob은 JavaScript 네이티브 형태가 아닌 데이터도 표현할 수 있습니다. File 인터페이스는 사용자 시스템의 파일을 지원하기 위해 Blob 인터페이스를 확장한 것이므로, 모든 블롭 기능을 상속합니다.

Blob 사용하기

블롭이 아닌 객체와 데이터에서 Blob을 생성하려면 Blob() 생성자를 사용하세요. 다른 블롭의 일부에서 새로운 블롭을 생성할 땐 slice() (en-US) 메서드를 사용할 수 있습니다. 사용자의 파일 시스템 내 파일을 Blob으로 얻는 방법은 File 문서를 참고하세요.

Blob 객체를 허용하는 API의 목록은 File 문서에도 있습니다.

생성자

Blob()
매개변수로 제공한 배열의 모든 데이터를 합친 데이터를 담은 새로운 Blob 객체를 반환합니다.

속성

Blob.size (en-US) Read only
Blob 객체가 담은 데이터의 바이트 단위의 사이즈입니다.
Blob.type (en-US) Read only
Blob 객체가 담은 데이터의 MIME 유형을 나타내는 문자열입니다. 유형을 알 수 없는 경우 빈 문자열을 반환합니다.

메서드

Blob.arrayBuffer() (en-US)
Blob의 전체 내용을 이진 데이터로 담은 ArrayBuffer로 이행하는 Promise를 반환합니다
Blob.slice() (en-US)
메서드를 호출한 블롭의 바이트를 주어진 시작 바이트와 끝 바이트 범위에서 복제해 새로운 Blob 객체를 생성하고 반환합니다.
Blob.stream() (en-US)
Blob의 콘텐츠를 읽을 수 있는 ReadableStream을 반환합니다.
Blob.text() (en-US)
Blob의 전체 내용을 UTF-8 텍스트로 담은 USVString으로 이행하는 Promise를 반환합니다.

예제 

블롭 생성하기

Blob() 생성자를 사용해 다른 객체에서 블롭을 생성하세요. 예를 들어, 아래 코드는 문자열에서 블롭을 생성합니다.

const obj = {hello: 'world'};
const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});

형식 배열의 콘텐츠를 나타내는 URL 생성하기

다음 코드는 JavaScript TypedArray를 생성한 후, 그 데이터를 담은 Blob 객체도 만듭니다. 그 후, URL.createObjectURL()을 호출해 블롭을 URL로 변환합니다.

HTML

<p>This example creates a typed array containing the ASCII codes
   for the space character through the letter Z, then converts it
   to an object URL. A link to open that object URL is created.
   Click the link to see the decoded object URL.</p>

JavaScript

이 코드의 주제는 typedArrayToURL() 함수로, 주어진 TypedArray에서 Blob을 생성하고, 블롭의 객체 URL을 반환합니다. 데이터를 객체 URL로 변환한 후에는 <img> 요소의 src 특성에 지정하는 등 다양하게 사용할 수 있습니다. (물론 해당 객체가 이미지여야 합니다)

function typedArrayToURL(typedArray, mimeType) {
  return URL.createObjectURL(new Blob([typedArray.buffer], {type: mimeType}))
}

const bytes = new Uint8Array(59);

for(let i = 0; i < 59; i++) {
  bytes[i] = 32 + i;
}

const url = typedArrayToURL(bytes, 'text/plain');

const link = document.createElement('a');
link.href = url;
link.innerText = 'Open the array URL';

document.body.appendChild(link);

결과

블롭에서 데이터 추출하기

블롭에서 데이터를 읽는 방법 하나는 FileReader를 사용하는 것입니다. 다음 코드는 Blob의 콘텐츠를 형식 배열로서 읽어 들입니다.

const reader = new FileReader();
reader.addEventListener('loadend', () => {
   // reader.result contains the contents of blob as a typed array
});
reader.readAsArrayBuffer(blob);

또 다른 방법은 블롭을 Response (en-US)로 사용하는 것입니다. 다음 코드는 Blob의 내용을 텍스트로 읽어옵니다.

var text = await (new Response(blob)).text();

FileReader의 다른 메서드를 사용하면 블롭의 데이터를 문자열이나 데이터 URL로도 읽어올 수 있습니다.

명세

명세 상태 비고
File API
The definition of 'The Blob interface' in that specification.
Working Draft Initial definition.

브라우저 호환성

BCD tables only load in the browser

같이 보기