斑點對象

找出什麼是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初學者手冊


更多瀏覽器教程: