Blob
Baseline 廣泛可用 *
注意:此功能在 Web Workers 中可用。
Blob 介面表示一個 blob,它是一個類似檔案的、不可變的原始資料物件;它可以被讀取為文字或二進位制資料,或者轉換為 ReadableStream,以便使用其方法來處理資料。
Blob 可以表示不一定是 JavaScript 原生格式的資料。 File 介面基於 Blob,繼承了 blob 的功能並擴充套件了對使用者系統上檔案的支援。
使用 Blob
要從其他非 blob 物件和資料構造 Blob,請使用 Blob() 建構函式。要建立包含另一個 blob 資料子集的 blob,請使用 slice() 方法。要獲取使用者檔案系統上檔案的 Blob 物件,請參閱 File 文件。
接受 Blob 物件的 API 也列在 File 文件中。
建構函式
Blob()-
返回一個新建立的
Blob物件,該物件包含傳遞到建構函式中的陣列中所有資料的串聯。
例項屬性
例項方法
Blob.arrayBuffer()-
返回一個 Promise,該 Promise 解析為一個
ArrayBuffer,其中包含Blob的全部內容作為二進位制資料。 Blob.bytes()-
返回一個 Promise,該 Promise 解析為一個
Uint8Array,其中包含Blob的內容。 Blob.slice()-
返回一個新的
Blob物件,其中包含在呼叫它的 blob 中指定位元組範圍的資料。 Blob.stream()-
返回一個
ReadableStream,可用於讀取Blob的內容。 Blob.text()-
返回一個 Promise,該 Promise 解析為一個字串,其中包含
Blob的全部內容,並將其解釋為 UTF-8 文字。
示例
建立 Blob
Blob() 建構函式可以從其他物件建立 blob。例如,要從 JSON 字串構造一個 blob
const obj = { hello: "world" };
const blob = new Blob([JSON.stringify(obj, null, 2)], {
type: "application/json",
});
建立表示型別化陣列內容的 URL
以下示例建立了一個 JavaScript 型別化陣列,並建立一個包含該型別化陣列資料的新 Blob。然後呼叫 URL.createObjectURL() 將 blob 轉換為 URL。
<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>
出於示例目的,此程式碼中的主要部分是 typedArrayToURL() 函式,該函式從給定的型別化陣列建立 Blob 並返回其物件 URL。在將資料轉換為物件 URL 後,它可用於多種方式,包括作為 <img> 元素的 src 屬性的值(當然,前提是資料包含影像)。
function showViewLiveResultButton() {
if (window.self !== window.top) {
// Ensure that if our document is in a frame, we get the user
// to first open it in its own tab or window. Otherwise, this
// example won't work.
const p = document.querySelector("p");
p.textContent = "";
const button = document.createElement("button");
button.textContent = "View live result of the example code above";
p.append(button);
button.addEventListener("click", () => window.open(location.href));
return true;
}
return false;
}
if (!showViewLiveResultButton()) {
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);
}
從 Blob 中提取資料
讀取 Blob 內容的一種方法是使用 FileReader。以下程式碼將 Blob 的內容讀取為型別化陣列
const reader = new FileReader();
reader.addEventListener("loadend", () => {
// reader.result contains the contents of blob as a typed array
});
reader.readAsArrayBuffer(blob);
讀取 Blob 內容的另一種方法是使用 Response。以下程式碼將 Blob 的內容讀取為文字
const text = await new Response(blob).text();
或者使用 Blob.text()
const text = await blob.text();
透過使用 FileReader 的其他方法,可以將 Blob 的內容讀取為字串或資料 URL。
規範
| 規範 |
|---|
| File API # blob-section |
瀏覽器相容性
載入中…