利用Blob進行文件上傳的完整步驟
Blob
Blob,Binary Large Object的縮寫,二進制類型的大對象,代表不可改變的原始數(shù)據(jù)
在計算機中,BLOB常常是數(shù)據(jù)庫中用來存儲二進制文件的字段類型。
Blob基本用法
Blob對象
Blob對象指的是字節(jié)序列,并且具有size屬性,是字節(jié)序列中的字節(jié)總數(shù),和一個type屬性,它是小寫的ASCII編碼的字符串表示的媒體類型字節(jié)序列。
size:以字節(jié)數(shù)返回字節(jié)序列的大小。獲取時,符合要求的用戶代理必須返回一個FileReader或一個FileReaderSync對象可以讀取的總字節(jié)數(shù),如果Blob沒有要讀取的字節(jié),則返回0 。
type:小寫的ASCII編碼字符串表示媒體類型Blob。在獲取時,用戶代理必須Blob以小寫形式返回a類型的ASCII編碼字符串,這樣當(dāng)它轉(zhuǎn)換為字節(jié)序列時,它是可解析的MIME類型,或者是空字符串(0字節(jié))如果是類型無法確定。
構(gòu)造函數(shù)
創(chuàng)建blob對象本質(zhì)上和創(chuàng)建一個其他對象的方式是一樣的,都是使用Blob() 的構(gòu)造函數(shù)來進行創(chuàng)建。 構(gòu)造函數(shù)接受兩個參數(shù):
第一個參數(shù)為一個數(shù)據(jù)序列,格式可以是ArrayBuffer, ArrayBufferView, Blob, DOMString
第二個參數(shù)是一個包含以下兩個屬性的對象
- type: MIME的類型,
- endings: 決定第一個參數(shù)的數(shù)據(jù)格式。默認值為"transparent",用于指定包含行結(jié)束符n的字符串如何被寫入。 它是以下兩個值中的一個: "native",表示行結(jié)束符會被更改為適合宿主操作系統(tǒng)文件系統(tǒng)的換行符; "transparent",表示會保持blob中保存的結(jié)束符不變。
var data1 = "a"; var blob1 = new Blob([data1]); console.log(blob1); //輸出:Blob {size: 1, type: ""} var debug = {hello: "world"}; var blob = new Blob([JSON.stringify(debug, null, 2)],{type : 'application/json'}); console.log(blob) // 輸出 Blob(22) {size: 22, type: "application/json"} // 創(chuàng)建一個8字節(jié)的ArrayBuffer,在其上創(chuàng)建一個每個數(shù)組元素為2字節(jié)的“視圖” var abf = new ArrayBuffer(8) var abv = new Int16Array(abf) var bolb_ArrayBuffer = new Blob(abv, {type : 'text/plain'}) console.log(bolb_ArrayBuffer) //輸出 Blob(4) {size: 4, type: "text/plain"}
slice方法
Blob對象有一個slice方法,返回一個新的 Blob對象,包含了源 Blob對象中指定范圍內(nèi)的數(shù)據(jù)。
slice(start, end, contentType)
start: 可選,代表 Blob 里的下標(biāo),表示第一個會被會被拷貝進新的 Blob 的字節(jié)的起始位置。如果傳入的是一個負數(shù),那么這個偏移量將會從數(shù)據(jù)的末尾從后到前開始計算。
end: 可選,代表的是 Blob 的一個下標(biāo),這個下標(biāo)-1的對應(yīng)的字節(jié)將會是被拷貝進新的Blob 的最后一個字節(jié)。如果你傳入了一個負數(shù),那么這個偏移量將會從數(shù)據(jù)的末尾從后到前開始計算。
contentType: 可選,給新的 Blob 賦予一個新的文檔類型。這將會把它的 type 屬性設(shè)為被傳入的值。它的默認值是一個空的字符串。
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用于文件分片上傳
- 分片與并發(fā)結(jié)合,將一個大文件分割成多塊,并發(fā)上傳,極大地提高大文件的上傳速度。
- 當(dāng)網(wǎng)絡(luò)問題導(dǎo)致傳輸錯誤時,只需要重傳出錯分片,而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。
分片上傳邏輯如下:
獲取要上傳文件的File對象,根據(jù)chunk(每片大?。ξ募M行分片
通過post方法輪循上傳每片文件,其中url中拼接querystring用于描述當(dāng)前上傳的文件信息;post body中存放本次要上傳的二進制數(shù)據(jù)片段
接口每次返回offset,用于執(zhí)行下次上傳
initUpload(); //初始化上傳 function initUpload() { var chunk = 100 * 1024; //每片大小 var input = document.getElementById("file"); //input file input.onchange = function (e) { var file = this.files[0]; var query = {}; var chunks = []; if (!!file) { var start = 0; //文件分片 for (var i = 0; i < Math.ceil(file.size / chunk); i++) { var end = start + chunk; chunks[i] = file.slice(start , end); start = end; } // 采用post方法上傳文件 // url query上拼接以下參數(shù),用于記錄上傳偏移 // post body中存放本次要上傳的二進制數(shù)據(jù) query = { fileSize: file.size, dataSize: chunk, nextOffset: 0 } upload(chunks, query, successPerUpload); } } } // 執(zhí)行上傳 function upload(chunks, query, cb) { var queryStr = Object.getOwnPropertyNames(query).map(key => { return key + "=" + query[key]; }).join("&"); var xhr = new XMLHttpRequest(); xhr.open("POST", "http://xxxx/opload?" + queryStr); xhr.overrideMimeType("application/octet-stream"); //獲取post body中二進制數(shù)據(jù) var index = Math.floor(query.nextOffset / query.dataSize); getFileBinary(chunks[index], function (binary) { if (xhr.sendAsBinary) { xhr.sendAsBinary(binary); } else { xhr.send(binary); } }); xhr.onreadystatechange = function (e) { if (xhr.readyState === 4) { if (xhr.status === 200) { var resp = JSON.parse(xhr.responseText); // 接口返回nextoffset // resp = { // isFinish:false, // offset:100*1024 // } if (typeof cb === "function") { cb.call(this, resp, chunks, query) } } } } } // 每片上傳成功后執(zhí)行 function successPerUpload(resp, chunks, query) { if (resp.isFinish === true) { alert("上傳成功"); } else { //未上傳完畢 query.offset = resp.offset; upload(chunks, query, successPerUpload); } } // 獲取文件二進制數(shù)據(jù) function getFileBinary(file, cb) { var reader = new FileReader(); reader.readAsArrayBuffer(file); reader.onload = function (e) { if (typeof cb === "function") { cb.call(this, this.result); } } }
Blob URL
blob協(xié)議的url使用時就像平時使用的url一樣,可以作為圖片請求地址,也可以作為文件請求地址。格式:
blob:http://XXX
- URL.createObjectURL(blob) 創(chuàng)建鏈接
- URL.revokeObjectURL(url)
下面是一個下載文件的示例,直接調(diào)用即可實現(xiàn)文件下載
// file是要下載的文件(blob對象) downloadHandler: function (file, fileName) { let link = document.createElement('a') link.href = window.URL.createObjectURL(file) link.download = fileName link.click() window.URL.revokeObjectURL(link.href) if (navigator.userAgent.indexOf('Firefox') > -1) { const a = document.createElement('a') a.addEventListener('click', function (e) { a.download = fileName a.href = URL.createObjectURL(file) }) let e = document.createEvent('MouseEvents') e.initEvent('click', false, false) a.dispatchEvent(e) } }
在從后臺獲取的數(shù)據(jù)接口中把返回類型設(shè)置為blob
var x = new XMLHttpRequest(); x.responseType = 'blob'; // 返回一個blob對象
Blob URL和Data URL的區(qū)別
Blob URL
Data URL
- Blob URL的長度一般比較短,但Data URL因為直接存儲圖片base64編碼后的數(shù)據(jù),往往很長,如上圖所示,瀏覽器在顯示Data URL時使用了省略號(…)。當(dāng)顯式大圖片時,使用Blob URL能獲取更好的可能性。
- Blob URL可以方便的使用XMLHttpRequest獲取源數(shù)據(jù),比如設(shè)置XMLHttpRequest返回的數(shù)據(jù)類型為blob
- Blob URL 只能在當(dāng)前應(yīng)用內(nèi)部使用,把Blob URL復(fù)制到瀏覽器的地址欄中,是無法獲取數(shù)據(jù)的。Data URL相比之下,就有很好的移植性,可以在任意瀏覽器中使用。
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
在layui框架中select下拉框監(jiān)聽更改事件的例子
今天小編就為大家分享一篇在layui框架中select下拉框監(jiān)聽更改事件的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09淺談關(guān)于JS下大批量異步任務(wù)按順序執(zhí)行解決方案一點思考
這篇文章主要介紹了淺談關(guān)于JS下大批量異步任務(wù)按順序執(zhí)行解決方案一點思考,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01JS插件amCharts實現(xiàn)繪制柱形圖默認顯示數(shù)值功能示例
這篇文章主要介紹了JS插件amCharts實現(xiàn)繪制柱形圖默認顯示數(shù)值功能,結(jié)合實例形式分析了amCharts插件繪制柱形圖并顯示數(shù)值的相關(guān)操作技巧,需要的朋友可以參考下2019-11-11