You are on the editable version of MDN Web Docs

MDN 웹 문서 사용자로 보기: https://developer.mozilla.org/ko/docs/Web/API/Blob

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

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

Blob 사용하기

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

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

생성자

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

속성

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

메서드

Blob.arrayBuffer()
Blob의 전체 내용을 이진 데이터로 담은 ArrayBuffer로 이행하는 Promise를 반환합니다
Blob.slice()
메서드를 호출한 블롭의 바이트를 주어진 시작 바이트와 끝 바이트 범위에서 복제해 새로운 Blob 객체를 생성하고 반환합니다.
Blob.stream()
Blob의 콘텐츠를 읽을 수 있는 ReadableStream을 반환합니다.
Blob.text()
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로 사용하는 것입니다. 다음 코드는 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.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
BlobChrome Full support 5Edge Full support 12Firefox Full support 4IE Full support 10Opera Full support 11Safari Full support 5.1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 14Opera Android Full support 11Safari iOS Full support 6Samsung Internet Android Full support 1.0
Blob() constructorChrome Full support 20Edge Full support 12Firefox Full support 13
Notes
Full support 13
Notes
Notes Before Firefox 16, the second parameter, when set to null or undefined, leads to an error instead of being handled as an empty dictionary.
IE Full support 10Opera Full support 12Safari Full support 8WebView Android Full support 37Chrome Android Full support 25Firefox Android Full support 14
Notes
Full support 14
Notes
Notes Before Firefox 16, the second parameter, when set to null or undefined, leads to an error instead of being handled as an empty dictionary.
Opera Android Full support 12Safari iOS Full support 8Samsung Internet Android Full support 1.5
arrayBuffer()Chrome Full support 76Edge Full support 79Firefox Full support 69IE No support NoOpera No support NoSafari No support NoWebView Android Full support 76Chrome Android Full support 76Firefox Android No support NoOpera Android Full support 54Safari iOS No support NoSamsung Internet Android Full support 12.0
sizeChrome Full support 5Edge Full support 12Firefox Full support 4IE Full support 10Opera Full support 11Safari Full support 5.1WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android Full support 1.0
slice()Chrome Full support 21
Full support 21
No support 5 — 25
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Full support 12Firefox Full support 13
Notes
Full support 13
Notes
Notes Prior to Firefox 12, there was a bug that affected the behavior of Blob.slice(); it did not work for start and end positions outside the range of signed 64-bit values; it has now been fixed to support unsigned 64-bit values.
No support 5 — 13
Prefixed
Prefixed Implemented with the vendor prefix: moz
IE Full support 10Opera Full support 12Safari Full support 5.1
Prefixed
Full support 5.1
Prefixed
Prefixed Implemented with the vendor prefix: webkit
WebView Android Full support YesChrome Android Full support 25
Full support 25
No support 18 — 25
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Firefox Android Full support 14Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 1.5
Full support 1.5
No support 1.0 — 1.5
Prefixed
Prefixed Implemented with the vendor prefix: webkit
stream()Chrome Full support 76Edge Full support 79Firefox Full support 69IE No support NoOpera No support NoSafari No support NoWebView Android Full support 76Chrome Android Full support 76Firefox Android No support NoOpera Android Full support 54Safari iOS No support NoSamsung Internet Android Full support 12.0
text()Chrome Full support 76Edge Full support 79Firefox Full support 69IE No support NoOpera No support NoSafari No support NoWebView Android Full support 76Chrome Android Full support 76Firefox Android No support NoOpera Android Full support 54Safari iOS No support NoSamsung Internet Android Full support 12.0
typeChrome Full support 5Edge Full support 12Firefox Full support 4IE Full support 10Opera Full support 11Safari Full support 5.1WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: alattalatta, hsl0, mdnwebdocs-bot, parksb, limkukhyun, kuil09
최종 변경자: alattalatta,