blob & createObjectURL 정보

탕 0614입니다!

이 문서는 Oysters Advent Calender 모여 굴 전사! ! ! 7일째 문서입니다.

소개

업무에서 처음 사용했기 때문에 사용법이나 이점, 주의점 등 필요한 것 같은 정보만 정리했습니다.
거의 작업 메모 정도이므로 참고 자료 정도에 가자!

Blob이란?

Blob = Binary Large OBject의 약자, 바이너리 데이터를 나타내는 객체, 저장하기위한 타입

Blob은 "유형이있는 이진 데이터"를 나타냅니다.

거대한 이미지, 오디오 파일, 비디오 파일 등을 처리 할 수 있습니다

immutable = 불변

blob을 직접 변경할 수는 없지만 blob에서 값을 잘라내거나 새 blob을 만들 수 있습니다

ECMA에 정의 된 표준 표준이며 html5 File API에 정의되어 있습니다.

Support Browser

※ File API란, JavaScript로부터 클라이언트측의 파일에 액세스 하기 위한 API

구성


Blob = [type] + [blobParts](blob1,blob2,....str,buffer)

type (option)

보통 MIMEType
※ MIME Type : 확장자 이외의 방법으로 전송할 문서의 종류를 브라우저에 전달하는 방법

blobParts

Blob/BufferSource/String으로 구성된 값의 배열

예

// 文字列から Blob を作成
let blob = new Blob(["<html>…</html>"], {type: 'text/html'});
// 注意: 最初の引数は配列である必要あり

// 型付き配列(Uint8Array)と文字列から Blob を作成
let hello = new Uint8Array([72, 101, 108, 108, 111]); // 二進での "hello"

let blob = new Blob([hello, ' ', 'world'], {type: 'text/plain'});