Blob对象操作
Blob对象是代表二进制类型的大对象，用来操作文件
语法： new Blob(array, options)
参数：
-
array 是一个由ArrayBuffer， ArrayBufferView， Blob， DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings 会被编码为 UTF-8。
-
options 是一个可选的字典，指定如下两个属性
type，默认值为“” ，它代表了将会被放入到 blob 中的数组内容的 MIME 类型 常见的MIME类型：类型 说明 text/html 超文本标记语言文本 text/plain 普通文本，表示文本文件的默认值 application/rtf RTF 文本 .rtf image/gif GIF 图形 .gif image/jpeg JPEG 图形 .jpeg、.jpg audio/basic au 声音文件 audio/midi、audio/x-midi MIDI 音乐文件 mid、.midi audio/x-pn-realaudio RealAudio 音乐文件 .ra、.ram video/mpeg MPEG 文件 .mpg、.mpeg video/x-msvideo AVI 文件 .avi application/x-gzip GZIP 文件 .gz application/x-tar TAR 文件 .tar endings，默认值为‘transparent’，用于指定包含行结束符\n的字符串如何被写入 native：表示行结束符会被更改为适合宿主操作系统文件系统的换行符， transparent：默认\n
DOMString 对象
let text = new Blob([string],{type: 'text/html"})
ArrayBuffer对象的Blob对象
let a = new ArrayBuffer(8)
let text = new Blob([a])
ArrayBufferView对象的Blob对象（ArrayBufferView可基于ArrayBuffer创建，返回值是一个类数组。如下：创建一个8字节的ArrayBuffer，在其上创建一个每个数组元素为2字节的“视图”）
let a = new ArrayBuffer(8)
let b = new Int16Array(a)
let text = new Blob([b], {type: 'text/plain'})
相关api：
File对象：负责处理那些以文件形式存在的二进制数据，也就是操作本地文件；
FileList对象：File对象的网页表单接口， multiple 选择多个文件；
FileReader对象：负责将二进制数据读入内存内容；
URL对象：用于对二进制数据生成URL。
FileReader api：用于读取文件，即把文件内容读入内存，对于不同类型的文件，FileReader提供不同的方法读取文件。如下:
// readAsBinaryString(Blob|File)：返回二进制字符串，该字符串每个字节包含一个0到255之间的整数,方法可以读取任意类型的文件，而不仅仅是文本文件，返回文件的原始的二进制内容。这个方法与XMLHttpRequest.sendAsBinary方法结合使用，就可以使用JavaScript上传任意文件到服务器。
var reader = new FileReader();
reader.onload = function(e) {
var rawData = reader.result;
}
reader.readAsBinaryString(File或Blob对象);
// readAsText(Blob|File, opt_encoding)：返回文本字符串。默认情况下，文本编码格式是’UTF-8’
var reader = new FileReader();
reader.onload = function(e) {
var text = reader.result;
}
reader.readAsText(File或Blob对象, 编码方法);
// readAsDataURL(Blob|File)：返回一个基于Base64编码的data-uri对象,作用基本上是将文件数据进行Base64编码。你可以将返回值设为图像的src属性。
var file = document.getElementById('input').files[0];
if(file.type.indexOf('image') !== -1) {
var reader = new FileReader();
reader.onload = function (e) {
var dataURL = reader.result;
}
reader.readAsDataURL(file);
}
// readAsArrayBuffer(Blob|File)：返回一个类型化数组(ArrayBuffer),即固定长度的二进制缓存数据。在文件操作时（比如将JPEG图像转为PNG图像），这个方法非常方便。
var reader = new FileReader();
reader.onload = function(e) {
var arrayBuffer = reader.result;
}
reader.readAsArrayBuffer(file);
FileReader对象采用异步方式读取文件，可以为一系列事件指定回调函数。
onabort方法：读取中断或调用reader.abort()方法时触发。
onerror方法：读取出错时触发。
onload方法：读取成功后触发。
onloadend方法：读取完成后触发，不管是否成功。触发顺序排在 onload 或 onerror 后面。
onloadstart方法：读取将要开始时触发。
onprogress方法：读取过程中周期性触发,用来显示读取进度。
Blob 使用场景
分片上传：
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上拼接以下参数，用于记录上传偏移
// post body中存放本次要上传的二进制数据
query = {
fileSize: file.size,
dataSize: chunk,
nextOffset: 0
}
upload(chunks, query, successPerUpload);
}
}
}
// 执行上传
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中二进制数据
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)
}
}
}
}
}
// 每片上传成功后执行
function successPerUpload(resp, chunks, query) {
if (resp.isFinish === true) {
alert("上传成功");
} else {
//未上传完毕
query.offset = resp.offset;
upload(chunks, query, successPerUpload);
}
}
// 获取文件二进制数据
function getFileBinary(file, cb) {
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function (e) {
if (typeof cb === "function") {
cb.call(this, this.result);
}
}
}
URL对象
URL对象用于生成指向File对象或Blob对象的URL，常见的场景主要作为文件下载地址和作为图片资源地址。
var objecturl = window.URL.createObjectURL(blob);
文件下载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blob Test</title.
<script>
window.onload = function () {
document.getElementById("button").onclick = function() {
const req = new XMLHttpRequest();
req.open('GET', 'http://***.com', true);
req.responseType = "arraybuffer";
req.onreadystatechange = function() {
if(this.status === 200 && this.readyState === 4) {
var link = document.createElement('a');
link.style.display = "none"
link.setAttribute("download ", '测试名称')
link.href = URL.createObjectURL(new Blob[this.response]);
document.body.appendChild(link)
link.click(）；
document.body.removeChild(link);
window.URL.revokeObjectURL(this.src)
}
}
}
}
</script>
</head>
<body>
<button id="button">下载</button>
</body>
</html>
如利用URL对象，在网页插入图片的例子。
<!DOCTYPE html>
<html lang="en">
<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.getElementByTagName("img")[0];
img.src = blob;
img.onload = function(e) {
URL.revokeObjectURL(this.src); //释放createObjectURL创建得对象
}
}
</script>
</head>
<body>
<input type="flie" accept="image/*" onchange="handleFile(this)" />
<br/>
<img style="width:200px;height:200px;">
</body>
</html>
本机视频预览的例子
var video = document.getElementById('video');
var obj_url = window.URL.createObjectURL(blob);
video.src = obj_url;
video.play()
window.URL.revokeObjectURL(obj_url);
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
