JS的二进制家族:Blob、ArrayBuffer
樑丶 2021-06-23 10:33:08 2021-06-23 110 0
概述
Blob: 前端的一个专门用于支持文件操作的二进制对象
ArrayBuffer:前端的一个通用的二进制缓冲区,类似数组,但在API和特性上却有诸多不同image.png
Blob
我们首先来介绍Blob,Blob是用来支持文件操作的。简单的说:在JS中,有两个构造函数 File 和 Blob, 而File继承了所有Blob的属性。
所以在我们看来,File对象可以看作一种特殊的Blob对象。
image.png
window.URL.createObjectURL方法可以把一个blob转化为一个Blob URL,并且用做文件下载或者图片显示的链接。
和冗长的Base64格式的Data URL相比,Blob URL的长度显然不能够存储足够的信息,这也就意味着它只是类似于一个浏览器内部的“引用“。从这个角度看,Blob URL是一个浏览器自行制定的一个伪协议通过window.URL.createObjectURL,接收一个Blob(File)对象,将其转化为Blob URL,然后赋给 a.download属性,然后在页面上点击这个链接就可以实现下载了
<a id="h">点此进行下载</a><!-- js部分 --><script> var blob = new Blob(["Hello World"]); var url = window.URL.createObjectURL(blob); var a = document.getElementById("h"); a.download = "helloworld.txt"; a.href = url;</script>
Blob实现图片本地显示
window.URL.createObjectURL生成的Blob URL还可以赋给img.src,从而实现图片的显示<!-- html部分 --><input type="file" id='f' /><img id='img' style="width: 200px;height:200px;" /><!-- js部分 --><script> document.getElementById('f').addEventListener('change', function (e) { var file = this.files[0]; const img = document.getElementById('img'); const url = window.URL.createObjectURL(file); img.src = url; img.onload = function () { window.URL.revokeObjectURL(url); } }, false);</script>
Blob实现文件分片上传
通过Blob.slice(start,end)可以分割大Blob为多个小Blob
xhr.send是可以直接发送Blob对象的<!-- html部分 --><input type="file" id='f' /><!-- js部分 --><script>function upload(blob) { var xhr = new XMLHttpRequest(); xhr.open('POST', '/ajax', true); xhr.setRequestHeader('Content-Type', 'text/plain') xhr.send(blob);}document.getElementById('f').addEventListener('change', function (e) { var blob = this.files[0]; const CHUNK_SIZE = 20; . const SIZE = blob.size; var start = 0; var end = CHUNK_SIZE; while (start < SIZE) { upload(blob.slice(start, end)); start = end; end = start + CHUNK_SIZE; }}, false);</script>
ArrayBuffer
image.png
ArrayBuffer跟JS的原生数组有很大的区别,如图所示
image.png
通过ArrayBuffer的格式读取本地数据
document.getElementById('f').addEventListener('change', function (e) { const file = this.files[0]; const fileReader = new FileReader(); fileReader.onload = function () { const result = fileReader.result; console.log(result) } fileReader.readAsArrayBuffer(file);}, false);
通过ArrayBuffer的格式读取Ajax请求数据
通过xhr.responseType = "arraybuffer" 指定响应的数据类型
在onload回调里打印xhr.responseconst xhr = new XMLHttpRequest();xhr.open("GET", "ajax", true);xhr.responseType = "arraybuffer";xhr.onload = function () { console.log(xhr.response)}xhr.send();