細(xì)說Web API中的Blob
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
在一般的Web開發(fā)中，很少會(huì)用到Blob，但Blob可以滿足一些場景下的特殊需求。Blob，Binary Large Object的縮寫，代表二進(jìn)制類型的大對(duì)象。Blob的概念在一些數(shù)據(jù)庫中有使用到，例如，MYSQL中的BLOB類型就表示二進(jìn)制數(shù)據(jù)的容器。在Web中，Blob類型的對(duì)象表示不可變的類似文件對(duì)象的原始數(shù)據(jù)，通俗點(diǎn)說，就是Blob對(duì)象是二進(jìn)制數(shù)據(jù)，但它是類似文件對(duì)象的二進(jìn)制數(shù)據(jù)，因此可以像操作File對(duì)象一樣操作Blob對(duì)象，實(shí)際上，F(xiàn)ile繼承自Blob。 Blob基本用法創(chuàng)建可以通過Blob的構(gòu)造函數(shù)創(chuàng)建Blob對(duì)象： Blob(blobParts[, options]) 參數(shù)說明： blobParts：數(shù)組類型，數(shù)組中的每一項(xiàng)連接起來構(gòu)成Blob對(duì)象的數(shù)據(jù)，數(shù)組中的每項(xiàng)元素可以是 options：可選項(xiàng)，字典格式類型，可以指定如下兩個(gè)屬性：
例如： var data1 = "a"; var data2 = "b"; var data3 = "<div style='color:red;'>This is a blob</div>"; var data4 = { "name": "abc" }; var blob1 = new Blob([data1]); var blob2 = new Blob([data1, data2]); var blob3 = new Blob([data3]); var blob4 = new Blob([JSON.stringify(data4)]); var blob5 = new Blob([data4]); var blob6 = new Blob([data3, data4]); console.log(blob1); //輸出：Blob {size: 1, type: ""} console.log(blob2); //輸出：Blob {size: 2, type: ""} console.log(blob3); //輸出：Blob {size: 44, type: ""} console.log(blob4); //輸出：Blob {size: 14, type: ""} console.log(blob5); //輸出：Blob {size: 15, type: ""} console.log(blob6); //輸出：Blob {size: 59, type: ""} size代表 slice方法Blob對(duì)象有一個(gè)slice方法，返回一個(gè)新的 slice([start[, end[, contentType]]]) 參數(shù)說明： start： 可選，代表 end： 可選，代表的是 contentType： 可選，給新的 例如： var data = "abcdef"; var blob1 = new Blob([data]); var blob2 = blob1.slice(0,3);
console.log(blob1); //輸出：Blob {size: 6, type: ""} console.log(blob2); //輸出：Blob {size: 3, type: ""} 通過slice方法，從blob1中創(chuàng)建出一個(gè)新的blob對(duì)象，size等于3。 Blob使用場景分片上傳前面已經(jīng)說過，F(xiàn)ile繼承自Blob，因此我們可以調(diào)用slice方法對(duì)大文件進(jìn)行分片長傳。代碼如下： function uploadFile(file) { var chunkSize = 1024 * 1024; // 每片1M大小 var totalSize = file.size; var chunkQuantity = Math.ceil(totalSize/chunkSize); //分片總數(shù) var offset = 0; // 偏移量
var reader = new FileReader(); reader.onload = function(e) { var xhr = new XMLHttpRequest(); xhr.open("POST","http://xxxx/upload?fileName="+file.name); xhr.overrideMimeType("application/octet-stream");
xhr.onreadystatechange = function() { if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { ++offset; if(offset === chunkQuantity) { alert("上傳完成"); } else if(offset === chunkQuantity-1){ blob = file.slice(offset*chunkSize, totalSize); // 上傳最后一片 reader.readAsBinaryString(blob); } else { blob = file.slice(offset*chunkSize, (offset+1)*chunkSize); reader.readAsBinaryString(blob); } }else { alert("上傳出錯(cuò)"); } }
if(xhr.sendAsBinary) { xhr.sendAsBinary(e.target.result); // e.target.result是此次讀取的分片二進(jìn)制數(shù)據(jù) } else { xhr.send(e.target.result); } } var blob = file.slice(0, chunkSize); reader.readAsBinaryString(blob); } 這段代碼還可以進(jìn)一步豐富，比如顯示當(dāng)前的上傳進(jìn)度，使用多個(gè)XMLHttpRequest對(duì)象并行上傳對(duì)象（需要傳遞分片數(shù)據(jù)的位置參數(shù)給服務(wù)器端）等。 Blob URLBlob URL是blob協(xié)議的URL，它的格式如下： blob:http://XXX Blob URL可以通過
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Blob Test</title> <script> function createDownloadFile() { var content = "Blob Data"; var blob = new Blob([content]); var link = document.getElementsByTagName("a")[0]; link.download = "file"; link.href = URL.createObjectURL(blob); } window.onload = createDownloadFile; </script> </head> <body> <a>下載</a> </body> </html> 點(diǎn)擊下載按鈕，瀏覽器將會(huì)下載一個(gè)名為file的文件，文件的內(nèi)容是：Blob Data。通過Blob對(duì)象，我們?cè)谇岸舜a中就可以動(dòng)態(tài)生成文件，提供給瀏覽器下載。打開Chrome瀏覽器調(diào)試窗口，在Elements標(biāo)簽下可以看到生成的Blob URL為：
為圖片文件創(chuàng)建一個(gè)Blob URL，賦值給 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Blob Test</title> <script> function handleFile(e) { var file = e.files[0]; var blob = URL.createObjectURL(file); var img = document.getElementsByTagName("img")[0]; img.src = blob; img.onload = function(e) { URL.revokeObjectURL(this.src); // 釋放createObjectURL創(chuàng)建的對(duì)象## } } </script> </head> <body> <input type="file" accept="image/*" onchange="handleFile(this)" /> <br/> <img style="width:200px;height:200px"> </body> </html> input中選擇的圖片會(huì)在
同時(shí)，可以在Network標(biāo)簽欄，發(fā)現(xiàn)這個(gè)Blob URL的請(qǐng)求信息：
這個(gè)請(qǐng)求信息和平時(shí)我們使用的Http URL獲取圖片幾乎完全一樣。我們還可以使用Data URL加載圖片資源： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Blob Test</title> <script> function handleFile(e) { var file = e.files[0]; var fileReader = new FileReader(); var img = document.getElementsByTagName("img")[0]; fileReader.onload = function(e) { img.src = e.target.result; } fileReader.readAsDataURL(file); } </script> </head> <body> <input type="file" accept="image/*" onchange="handleFile(this)" /> <br/> <img style="width:200px;height:200px"> </body> </html> FileReader的
Data URL對(duì)大家來說應(yīng)該并不陌生，Web性能優(yōu)化中有一項(xiàng)措施：把小圖片用base64編碼直接嵌入到HTML文件中，實(shí)際上就是利用了Data URL來獲取嵌入的圖片數(shù)據(jù)。 那么Blob URL和Data URL有什么區(qū)別呢？
var blobUrl = URL.createObjectURL(new Blob(['Test'], {type: 'text/plain'})); var x = new XMLHttpRequest(); // 如果設(shè)置x.responseType = 'blob'，將返回一個(gè)Blob對(duì)象，而不是文本: // x.responseType = 'blob'; x.onload = function() { alert(x.responseText); // 輸出 Test }; x.open('get', blobUrl); x.send(); 對(duì)于Data URL，并不是所有瀏覽器都支持通過XMLHttpRequest獲取源數(shù)據(jù)的。 3. Blob URL 只能在當(dāng)前應(yīng)用內(nèi)部使用，把Blob URL復(fù)制到瀏覽器的地址欄中，是無法獲取數(shù)據(jù)的。Data URL相比之下，就有很好的移植性，你可以在任意瀏覽器中使用。 除了可以用作圖片資源的網(wǎng)絡(luò)地址，Blob URL也可以用作其他資源的網(wǎng)絡(luò)地址，例如html文件、json文件等，為了保證瀏覽器能正確的解析Blob URL返回的文件類型，需要在創(chuàng)建Blob對(duì)象時(shí)指定相應(yīng)的type： // 創(chuàng)建HTML文件的Blob URL var data = "<div style='color:red;'>This is a blob</div>"; var blob = new Blob([data], { type: 'text/html' }); var blobURL = URL.createObjectURL(blob); // 創(chuàng)建JSON文件的Blob URL var data = { "name": "abc" }; var blob = new Blob([JSON.stringify(data)], { type: 'application/json' }); var blobURL = URL.createObjectURL(blob);
該文章在 2023/11/27 11:48:05 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
