探索js中的二进制类

• 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前几天碰到一个问题，要实现通过websocket实时上传本地正在录音的内容并转换成文字显示，但是上传的音频流用什么来存呢，印象中二进制存储是用Blob，但是又有些不太确定还有没有别的可以存储二进制的类，今天就一起来研究一下吧。 1.Blob

Blob是js对大数据块、整个文件的操作，Blob可以生成Blob URL进行图片下载（放在a标签）、图片展示（放在img中src标签）。blob对象无法对二进制细节的控制，但是有slice方法可以将数据分段。Blob是针对文件的，或者可以说它就是一个文件对象，同时Blob欠缺对二进制数据的细节操作能力，比如如果要具体修改某一部分的二进制数据，Blob就不够用了，而这种细粒度的功能则可以由ArraryBuffer来完成。

// Blob实现下载
<a id="test">点此进行下载</a>

var blob = new Blob(["Hello World"]); 
var url = window.URL.createObjectURL(blob); 
var a = document.getElementById("test"); 
a.download = "helloworld.txt"; 
a.href = url;

// Blob实现图片显示
<input type="file" id='test' />
<img id='img' style="width: 100px;height:100px;" />

document.getElementById('test').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);

// Blob实现文件分片上传
<input type="file" id='test' />

function upload(blob) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/ajax', true);
    xhr.setRequestHeader('Content-Type', 'text/plain')
    xhr.send(blob);
}

document.getElementById('test').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);

// 本地读取文件内容
<input type="file" id='test' />
<script>
  document.getElementById('test').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>

2.ArrayBuffer

ArrayBuffer可以通过FileReader将文件转化为ArrayBuffer数据进行赌去操作，可以通过TypeArray对象和DataView对象进行写入操作。

// 通过ArrayBuffer读取本地数据
document.getElementById('test').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请求数据（responeseType='arraybuffer'）
const xhr = new XMLHttpRequest();
xhr.open("GET", "ajax", true);
xhr.responseType = "arraybuffer";
xhr.onload = function () {
    console.log(xhr.response)
}
xhr.send();

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