Blob Là Gì

The Blob object represents a blob, which is a file-lượt thích object of immutable, raw data; they can be read as text or binary data, or converted into a ReadableStream so its methods can be used for processing the data.

Bạn đang xem: Blob là gì

Blobs can represent data that isn"t necessarily in a JavaScript-native sầu format. The File interface is based on Blob, inheriting blob functionality and expanding it khổng lồ tư vấn files on the user"s system.

To construct a Blob from other non-blob objects và data, use the Blob() constructor. To create a blob that contains a submix of another blob"s data, use the slice() method. To obtaina Blob object for a tệp tin on the user"s tệp tin system, see the File documentation.

The APIs accepting Blob objects are also listed in the File documentation.

Blob() Returns a newly created Blob object which contains a concatenation of all of the data in the array passed inkhổng lồ the constructor.
Blob.prototype.kích cỡ Read only The form size, in bytes, of the data contained in the Blob object. Blob.prototype.type Read only A string indicating the MIMEtype of the data contained in the Blob. If the type is unknown, this string is empty.
Blob.prototype.arrayBuffer() Returns a promise that resolves with an ArrayBuffer containing the entire contents of the Blob as binary data. Blob.prototype.slice() Returns a new Blob object containing the data in the specified range of bytes of the blob on which it"s called. Returns a ReadableStream that can be used to read the contents of the Blob. Blob.prototype.text() Returns a promise that resolves with a USVString containing the entire contents of the Blob interpreted as UTF-8 text.

Xem thêm: Hàm Tách Ngày Tháng Năm Trong 1 Ô Sang Các Ô Khác Mà Vẫn Có Số 0 Ở Đầu

The Blob() constructor can create blobs from other objects. For example, lớn construct a blob from a JSON string:

const obj = hello: "world";const blob = new Blob(, type : "application/json");
The following code creates a JavaScript typed array & creates a new Blob containing the typed array"s data. It then calls URL.createObjectURL() to convert the blob into a URL.


p>This example creates a typed array containing the ASCII codes for the space character through the letter Z, then converts it khổng lồ an object URL. A link lớn open that object URL is created. Click the liên kết lớn see the decoded object URL.p>JavaScriptThe main piece of this code for example purposes is the typedArrayToURL() function, which creates a Blob from the given typed array and returns an object URL for it. Having converted the data inkhổng lồ an object URL, it can be used in a number of ways, including as the value of the element"s src attribute (assuming the data contains an image, of course).

function typedArrayToURL(typedArray, mimeType) return URL.createObjectURL(new Blob(, type: mimeType))const bytes = new Uint8Array(59);for(let i = 0; i 59; i++) bytes = 32 + i;const url = typedArrayToURL(bytes, "text/plain");const links = document.createElement("a");links.href = url;link.innerText = "xuất hiện the array URL";document.body.appendChild(link);ResultClick the links in the example to lớn see the browser decode the object URL.

One way khổng lồ read content from a Blob is to use a FileReader. The following code reads the nội dung of a Blob as a typed array:

const reader = new FileReader();reader.addEventListener("loadend", () => // reader.result contains the contents of blob as a typed array);reader.readAsArrayBuffer(blob);Another way khổng lồ read content from a Blob is lớn use a Response. The following code reads the content of a Blob as text:

const text = await (new Response(blob)).text();Or by using Blob.prototype.text():

const text = await blob.text();By using other methods of FileReader, it is possible lớn read the contents of a Blob as a string or a data URL.

Specification Status Comment
File APIThe definition of "The Blob interface" in that specification. Working Draft Initial definition.

Browser compatibility

BCD tables only load in the browser

See also

Found a problem with this page?

Last modified: Feb 19, 2021, by MDN contributors

Change your languageSelect your preferred language English (US)DeutschEspañolفارسیFrançais日本語한국어Português (doBrasil)Português (Europeu)РусскийУкраїнська中文 (简体)正體中文 (繁體) Change language