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();