二进制数据：ArrayBuffer和blob总结(实战)，以及相互转换方法_js如何将bolb类型转dataview

1. ArrayBuffer

ArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer是不可以直接操作的，而是要通过类型数组对象或 DataView 对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。
创建ArrayBuffer：

var buffer = new ArrayBuffer(8);
console.log(buffer.byteLength);   // 输出字节
//new ArrayBuffer时，传入的参数表示要创建的字节数。
1
2
3

同时要说明，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);
1
2
3
4
5
6
7
8
9

通过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();
1
2
3
4
5
6
7

Node端

const app = new Koa();
app.use(async (ctx) => {
  if (pathname = '/ajax') {
    ctx.body = 'hello world';
    ctx.status = 200;
  }
}).listen(3000)
1
2
3
4
5
6
7

通过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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2. blob

blob(binary large object)，它表示一个不可变、原始数据的类文件对象。是二进制的容器，直接new Blob就可以创建了：

new Blob([123]);
1

blob类型只有slice方法，用于返回一个新的 Blob对象，包含了源 Blob对象中指定范围内的数据。 对比发现，ArrayBuffer的数据，是可以按照字节去操作的，而Blob的只能作为一个整的对象去处理。所以说，ArrayBuffer相比Blob更接近真实的二进制，更底层。
------------------------------------------------实战------------------------------------------

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

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

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

blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
和冗长的Base64格式的Data URL相比，Blob URL的长度显然不能够存储足够的信息，这也就意味着它只是类似于一个浏览器内部的“引用“。从这个角度看，Blob URL是一个浏览器自行制定的一个伪协议## 3.ArrayBuffer与Blob互转

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> 
1
2
3
4
5
6
7
8
9
10

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

2. 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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('---------------');
    }
});
1
2
3
4
5
6
7
8
9
10

4.本地读取文件内容

如果想要读取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
2
3
4
5
6
7
8
9
10
11
12

3.相互转换

ArrayBuffer转Blob
arraybuffer转blob很方便，作为参数传入就行了。

var buffer = new ArrayBuffer(16);
var blob = new Blob([buffer]);
1
2

Blob转ArrayBuffer
此处需要借助fileReader对象了，

var blob = new Blob([1,2,3,4,5]);
var reader = new FileReader();

reader.onload = function() {
    console.log(this.result);
}
reader.readAsArrayBuffer(blob);
1
2
3
4
5
6
7

控制台输出的则是ArrayBuffer的数据了。

ajax获取
很多时候，往往需要前端向后端请求二进制数据，我们来对比下这两者在ajax获取中会有区别么？

先弄张图片作为二进制来源，使用node的fs模块就行了，

let file = fs.readFileSync('test.jpg');
获取arraybuffer的发送/arraybuffer请求，获取blob的发送/blob请求，

if ('/arraybuffer' === req.url || '/blob' === req.url) {
    res.write(file);
    res.end();
}
1
2
3
4
5
6
7

前端方面，利用原生的XMLHttpRequest发送请求，并设置responseType就行了，

xhr.responseType = 'arraybuffer';
xhr.responseType = 'blob';
1
2

后端都是返回的二进制信息，而到了前端由于设置了type，浏览器自动转化了类型，打印除了不同的结果。

4.总结

ArrayBuffer和Blob一样，都是二进制数据的容器，而ArrayBuffer相比更为底层，他可以去操作去修改这些二进制值，这两者之间也是可以互转的。