浅谈JS的二进制家族

概述

blob: 前端的一个专门用于支持文件操作的二进制对象

arraybuffer：前端的一个通用的二进制缓冲区，类似数组，但在api和特性上却有诸多不同

buffer：node.js提供的一个二进制缓冲区，常用来处理i/o操作

blob

我们首先来介绍blob，blob是用来支持文件操作的。简单的说：在js中，有两个构造函数 file 和 blob, 而file继承了所有blob的属性。

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

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

（备注：目前 file api规范的状态为working draft）

我们上面说了，file对象是一种特殊的blob对象，那么它自然就可以直接调用blob对象的方法。让我们看一看blob具体有哪些方法，以及能够用它们实现哪些功能

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>

备注：download属性不兼容ie, 对ie可通过window.navigator.mssaveblob方法或其他进行优化(ie10/11)

运行结果

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 () {
        // 释放一个之前通过调用 url.createobjecturl创建的 url 对象
        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>

node端

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' />


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

运行结果

上面介绍了blob的用法，我们不难发现，blob是针对文件的，或者可以说它就是一个文件对象，同时呢我们发现blob欠缺对二进制数据的细节操作能力，比如如果如果要具体修改某一部分的二进制数据，blob显然就不够用了，而这种细粒度的功能则可以由下面介绍的arraybuffer来完成。

arraybuffer

让我们用一张图看下arraybuffer的大体的功能

同时要说明，arraybuffer跟js的原生数组有很大的区别，如图所示

下面一一进行细节的介绍

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

运行结果

通过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]

通过dataview对arraybuffer进行写操作

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对接收到的前端数据进行整合

buffer实战

例子如下：

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

运行结果

node端输出

asdasdsadfsdfsadasdas

以上就是浅谈js的二进制家族的详细内容，更多关于js的二进制家族的资料请关注其它相关文章！