blob物件介紹及相關應用

後面有時間總結一下react相關知識和效能優化的東西，這些東西總結起來要花些時間。一直沒有時間總結。今天的這個問題也是專案中用到的，之前沒有寫過，寫在部落格中，有需要的自取。主要是js流檔案blob介紹及相關應用。

var blob = new blob(dataarr:array, opt:);

dataarray：陣列，包含了要新增到blob物件中的資料，資料可以是任意多個arraybuffer，arraybufferview， blob，或者 domstring物件。

opt：物件，用於設定blob物件的屬性（如：mime型別）

除了這些，我再補充幾個

1、建立乙個裝填domstring物件的blob物件

let haorooms ="hello haorooms
";let blob = new blob([haorooms],)
blob
//blob(25)

2、建立乙個裝填arraybuffer物件的blob物件

let haorooms =new arraybuffer(8);
let blob = new blob([haorooms],)
blob
// 輸出：blob(8)

3、blob.slice()

blob.slice(start:number, end:number, contenttype:string) start：開始索引，預設為0 end：擷取結束索引（不包括end）

contenttype：新blob的mime型別，預設為空字串

例子：

let blob = new blob(['haorooms ceshi duixiadasdadadad'],)
let b2 = blob.slice(0,5,'text/plain')
b2blob(5)

4、canvas.toblob()

var canvas = document.getelementbyid("canvas");
canvas.toblob(function(blob));

預覽canvas

1、通過url顯示

我們上傳檔案預覽，一般都是預覽blob物件路徑。 img的src屬性及background的url屬性，都可以通過接收的網路位址或base64來顯示，同樣的，我們也可以把轉化為blob物件，生成url（url.createobjecturl(blob)），來顯示。

this.$http.get('請求位址', ).then(response => .xls`
anchor.click()
window.url.revokeobjecturl(data)
})

3、檔案分片上傳

通過blob.slice方法，可以將大檔案分片，輪循向後台提交各檔案片段，即可實現檔案的分片上傳。

思路如下：

獲取要上傳檔案的file物件，根據chunk（每片大小）對檔案進行分片

通過post方**循上傳每片檔案，其中url中拼接querystring用於描述當前上傳的檔案資訊；post body中存放本次要上傳的二進位制資料片段

介面每次返回offset，用於執行下次上傳

下面是分片上傳的簡單實現：

initupload();
//初始化上傳
function initupload() ;
var chunks = ;
if (!!file) 
// 採用post方法上傳檔案
// url query上拼接以下引數，用於記錄上傳偏移
// post body中存放本次要上傳的二進位制資料
query = 
upload(chunks, query, successperupload);}}
}// 執行上傳
//獲取post body中二進位制資料
var index = math.floor(query.nextoffset / query.datasize);
getfilebinary(chunks[index], function (binary) else 
});xhr.onreadystatechange = function (e) 
if (typeof cb === "function") }}
}}// 每片上傳成功後執行
function successperupload(resp, chunks, query) else 
}// 獲取檔案二進位制資料
function getfilebinary(file, cb) 
}}

blob物件介紹及相關應用

Ansible playbook介紹及應用

Nginx介紹及相關命令

ubuntu terminal 介紹及相關命令

blob物件介紹及相關應用

Ansible playbook介紹及應用

Nginx介紹及相關命令

ubuntu terminal 介紹及相關命令

相關推薦