js 中的Blob類型
簡單記錄，以備不時之需，大佬勿噴，多謝！（づ￣3￣）づ╭❤～
Blob 是js 中的一種對象類型，主要用來存取二進制數據的。類似於File對象, File繼承自Blob.
主要用途
最主要用途就是構建Blob對象,然後創建對象Url，然後賦值給標籤或者使用xhr (XMLHttpRequest)進行下載
分片上傳文件
這裏主要說的是 File 對象， 因爲是繼承自Blob， 所以也可以算作是Blob對象特性
上傳的例子：（來源於網絡） 使用slice屬性進行分片上傳
function uploadFile(file) {
var chunkSize = 1024 * 1024; //每片1M大小
var totalSize = file.size;
var chunkQuantity = Math.ceil(totalSize/chunkSize); //分片總數
var offset = 0; //偏移量
var reader = new FileReader();
reader.onload = function(e) {
var xhr = new XMLHttpRequest();
xhr.open("POST", url);
xhr.overrideMimeType("application/octet-stream");
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && 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("上傳出錯");
}
}
if(xhr.sendAsBinary) {
xhr.sendAsBinary(e.target.result);
} else {
xhr.send(e.target.result);
}
}
var blob = file.slice(0, chunkSize);
reader.readAsBinaryString(blob);
}
下載數據
可以通過創建Blob 對象的url 進行自定義數據的下載。
注意：建議在創建Blob 對象的時候指定文件類型
主要實現方式就是通過 創建數據的Blob對象,並創建其Url然後賦值給相應的 標籤, 移除對應的url
可以根據具體需要，
- 賦值給
a標籤 ，通過點擊操作可以下載文件數據。 - 賦值給
img標籤， 可以爲其添加圖片數據。
例如下面的，通過將圖片數據轉換爲Blob Url並賦值給img達到加載圖片的目的
圖片數據上傳的時候是File對象，所以可以直接創建對象URL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="file" accept="image/*" onchange="handleFile(this)">
<br/>
<img style="width:100%;height:100%;" src="" alt="">
<script>
function handleFile(e) {
console.log(e.files);
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創建得對象
}
}
</script>
</body>
</html>
下面是通過創建Blob Url 從而達到下載文件的目的。
function createDownloadFile() {
let content = "Blob Data";
let blob = new Blob([content], "text/plain");
let link = document.getElementsByTagName('a')[0];
link.download = "file";
link.href = URL.createObjectURL(blob);
}
獲取源數據
let blobUrl = URL.createObjectURL(new Blob(['Test'], {type: 'text/plain'}));
let xhr = new XMLHttpRequest();
//如果是指xhr.responseType = 'blob',將返回一個Blob對象，而不是文本；
//xhr.responseType = 'blob';
xhr.onload = function() {alert(xhr.responseText);}
xhr.open('get', blobUrl);
xhr.send();