总结： 本文介绍了三个二进制类 Blob、ArrayBuffer和Buffer

1.其中Blob是js对大数据块，整个文件的操作，File继承于Blob，Blob可以生成Blob URL，进而进行图片下载（生成a标签）、图片展示（放到img的src中）使用FileReaderAPI将Blob转回为ArrayBuffer Data URL(base64)等类型，blob对象无法对二进制细节的控制，但是有slice方法可以将数据分段。

2.ArrayBuffer可以由fileReader的readAsArrayBuffer将Blob转化而成，之后可以使用DataView转换成TypedArray，然后进行二进制数据的操纵。

3.Buffer是Nodejs中的概念，一般用法接收数据，拼接数据，最后toString转编码。http://nodejs.cn/api/buffer.html#buffer_buffer

首先来介绍Blob，Blob是用来支持文件操作的。

在JS中，有两个构造函数 File 和 Blob, 而File继承了所有Blob的属性。

所以在我们看来，File对象可以看作一种特殊的Blob对象。

在前端工程中，我们在哪些操作中可以获得File对象呢？ 请看：

Blob实战

通过window.URL.createObjectURL方法可以把一个blob转化为一个Blob URL，并且用做文件下载或者图片显示的链接。

Blob URL所实现的下载或者显示等功能，仅仅可以在单个浏览器内部进行。而不能在服务器上进行存储，亦或者说它没有在服务器端存储的意义。

下面是一个Blob的例子，可以看到它很短

blob:d3958f5c-0777-0845-9dcf-2cb28783acaf

和冗长的Base64格式的Data URL相比，Blob URL的长度显然不能够存储足够的信息，这也就意味着它只是类似于一个浏览器内部的“引用“。从这个角度看，Blob URL是一个浏览器自行制定的一个伪协议

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> 

<!-- 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>

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('---------------');
According to the Zhanjiang commerce bureau, the actual amount of foreign capital 
utilized in Zhanjiang from January to October this year was





运行结果
如果想要读取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>





======================================================================================================================
上面介绍了Blob的用法，我们不难发现，Blob是针对文件的，或者可以说它就是一个文件对象，同时呢我们发现Blob欠缺对二进制数据的细节操作能力，比如如果如果要具体修改某一部分的二进制数据，Blob显然就不够用了，而这种细粒度的功能则可以由下面介绍的ArrayBuffer来完成。
ArrayBuffer
让我们用一张图看下ArrayBuffer的大体的功能
通过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);
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)




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





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