JS的二进制家族：Blob、ArrayBuffer和Buffer

1.Blob实现下载文件
我们可以通过window.URL.createObjectURL，接收一个Blob（File）对象，将其转化为Blob URL,然后赋给 a.download属性，然后在页面上点击这个链接就可以实现下载了

<!-- html部分 -->
<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>

2.Blob实现图片本地显示

<!-- 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 () {// 释放一个之前通过调用 URL.createObjectURL创建的 URL 对象window.URL.revokeObjectURL(url);}}, false);
</script>

3.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>

Node端(Koa)

app.use(async (ctx, next) => {await next();if (ctx.path === '/ajax') {const req = ctx.req;const body = await parse(req);ctx.status = 200;console.log(body);console.log('---------------');}
});

4.Blob本地读取文件内容
如果想要读取Blob或者文件对象并转化为其他格式的数据，可以借助FileReader对象的API进行操作
FileReader.readAsText(Blob)：将Blob转化为文本字符串
FileReader.readAsArrayBuffer(Blob)：将Blob转为ArrayBuffer格式数据
FileReader.readAsDataURL(): 将Blob转化为Base64格式的Data URL
下面我们尝试把一个文件的内容通过字符串的方式读取出来

<input type="file" id='f' />
<script>document.getElementById('f').addEventListener('change', function (e) {var file = this.files[0];const reader = new FileReader();reader.onload = function () {const content = reader.result;console.log(content);}reader.readAsText(file);}, false);
</script>

1.通过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);

2.通过ArrayBuffer的格式读取Ajax请求数据
通过xhr.responseType = “arraybuffer” 指定响应的数据类型
在onload回调里打印xhr.response
前端

const xhr = new XMLHttpRequest();
xhr.open("GET", "ajax", true);
xhr.responseType = "arraybuffer";
xhr.onload = function () {console.log(xhr.response)
}
xhr.send();

Node端

const app = new Koa();
app.use(async (ctx) => {if (pathname = '/ajax') {ctx.body = 'hello world';ctx.status = 200;}
}).listen(3000)

3.通过TypeArray对ArrayBuffer进行写操作

const typedArray1 = new Int8Array(8);
typedArray1[0] = 32;const typedArray2 = new Int8Array(typedArray1);
typedArray2[1] = 42;console.log(typedArray1);
//  output: Int8Array [32, 0, 0, 0, 0, 0, 0, 0]console.log(typedArray2);
//  output: Int8Array [32, 42, 0, 0, 0, 0, 0, 0]

4.通过DataView对ArrayBuffer进行写操作

const buffer = new ArrayBuffer(16);
const view = new DataView(buffer);
view.setInt8(2, 42);
console.log(view.getInt8(2));
// 输出: 42

1.Buffer是Node.js提供的对象，前端没有。它一般应用于IO操作，例如接收前端请求数据时候，可以通过以下的Buffer的API对接收到的前端数据进行整合
例子如下

// Node端（Koa）
const app = new Koa();
app.use(async (ctx, next) => {if (ctx.path === '/ajax') {const chunks = [];const req = ctx.req;req.on('data', buf => {chunks.push(buf);})req.on('end', () => {let buffer = Buffer.concat(chunks);console.log(buffer.toString())})}
});
app.listen(3000)// 前端
const xhr = new XMLHttpRequest();
xhr.open("POST", "ajax", true);
xhr.setRequestHeader('Content-Type', 'text/plain')
xhr.send("asdasdsadfsdfsadasdas");