斑點對象

找出什麼是Blob以及如何使用它

網絡瀏覽器實現了Blob對象，負責保存數據。

Blob的意思是“二進制大對象”，它是大塊字節的不透明表示。

斑點用於許多事情。

可以從網絡中的內容創建它們。它們可以保存到磁盤，也可以從磁盤讀取。它們是用於File用於FileReader以API為例。

可以在之間發送Blob網絡工作者和內嵌框架使用頻道訊息API，並使用推送API。

也可以使用URL引用Blob。

您可以提取存儲在Blob中的文本（或字節），然後Blob甚至可以直接存儲在IndexedDB中，也可以從那裡檢索它們。

看我的IndexedDB教程

Blob是要理解的基本數據類型。

可以創建一個Blob：

  • 使用Blob()構造函數
  • 來自另一個Blob，使用Blob.slice()實例方法

構造函數採用值數組。即使您只將一個字符串放入Blob中，也必須將其包裝在一個數組中。

例子：

const data = new Blob(['Test'])

您無需放置細繩價值。您可以通過：

Blob構造函數採用一個可選的第二個參數，該參數表示MIME類型：

const data = new Blob(['Test'], { type: 'text/plain' })

擁有Blob對像後，就可以訪問其2個屬性：

  • size返回Blob內容的長度（以字節為單位）
  • type與之關聯的MIME類型

您可以調用其唯一的方法，slice()。

您打電話的時候slice()您可以檢索斑點的一部分。

這是一個從字節的10到20創建新Blob的示例aBlob：

const partialBlob = aBlob.slice(10, 20);

上載Blob

此代碼用作輸入類型或拖放操作的回調。我們使用以下命令將Blob加載到網址中XHR，使用f跟踪進度的功能：

const uploadBlob = (url, blob, trackProgress) => {
	const xhr = new XMLHttpRequest()
	xhr.open('POST', url)
	xhr.send(blob)
	xhr.upload.onprogress = trackProgress
}

從互聯網下載數據

我們可以使用以下語法從互聯網下載數據並將其存儲到Blob對像中：

const downloadBlob = (url, callback) => {
	const xhr = new XMLHttpRequest()
	xhr.open('GET', url)
	xhr.responseType = 'blob'

<span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">onload</span> <span style="color:#f92672">=</span> () =&gt; {
<span style="color:#a6e22e">callback</span>(<span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">response</span>)
}

<span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">send</span>(<span style="color:#66d9ef">null</span>)

}

Blob網址

我提到過，也可以使用URL來引用blob。

Blob URL由瀏覽器生成，是內部引用。給定一個Blob，您可以使用URL.createObjectURL()功能。

Blob網址以blob://方案。

一旦瀏覽器看到該URL，它將為存儲在內存或磁盤中的相應Blob提供服務。

Blob網址與數據網址不同（開頭為data:），因為它們不將數據存儲在URL中。它們也不同於文件URL（以file:），因為它們不會顯示敏感信息（例如文件路徑）。

如果您訪問的Blob URL不再存在，則會從瀏覽器中收到404錯誤。

生成Blob網址後，您可以將其刪除，方法是：URL.revokeObjectURL()並傳遞網址。

從頁面上的本地磁盤加載文件並獲取

在此示例代碼中，我們有一個input元素以選擇圖像。選擇圖像後，我們將刪除輸入元素並顯示圖像。完成顯示圖像後，我們還將清除blob：

<input type="file" allow="image/*"  />
const input = document.querySelector('input')

input.addEventListener(‘change’, e => {
const img = document.createElement(‘img’)
const imageBlob = URL.createObjectURL(input.files[0])
img.src = imageBlob


<span style="color:#a6e22e">img</span>.<span style="color:#a6e22e">onload</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span>() {
  <span style="color:#a6e22e">URL</span>.<span style="color:#a6e22e">revokeObjectURL</span>(<span style="color:#a6e22e">imageBlob</span>)
}

<span style="color:#a6e22e">input</span>.<span style="color:#a6e22e">parentNode</span>.<span style="color:#a6e22e">replaceChild</span>(<span style="color:#a6e22e">img</span>, <span style="color:#a6e22e">input</span>)

})

從斑點讀取

您無法直接訪問Blob中包含的數據。

為此，我們必須使用文件閱讀器目的。

免費下載我的JavaScript初學者手冊


更多瀏覽器教程：


在線技術維基！