前端通过Blob或File文件获取二进制数据

前言：

按理说，咱前端使用二进制的场景主要是文件以二进制格式的数据上传到后端，或者将后端返回的二进制数据文件下载并解析成文件，关于以上两种场景，可以看我之前的文章。

前端上传文件保存到变量中_接着奏乐接着舞。的博客-CSDN博客

一般情况下，都是给后端一个File文件就完事了，但是有时候后端就非要二进制数据流。

这篇文章主要是写如何将Blob文件或者File文件转成二进制数据，并且将数据转换成后端需要的，最后加密发给后端。

使用场景：

前端使用recorder.js以及websoket,实现前端录音，将音频文件以二进制数据流的形式，加密后发送给后端。

ps1：前端录音和websoket的功能我有写博客。

vue基于websocket实现智能聊天及吸附动画效果_接着奏乐接着舞。的博客-CSDN博客_vuewebsocket聊天

vue悬浮框自由移动+录音功能_接着奏乐接着舞。的博客-CSDN博客_vue浮动框

ps2:后端需要的二进制数据格式是unit8，这个应该是因人而异的，不过不管用啥，其实很简单就把我的例子unit8那里改成你们约定的格式。

由上图可知，其实Blob或者File文件只是一个类似仓库的东西，我们无法通过它取出来原始的二进制数据，而完成这些操作的是readAsArrayBuffer()方法，它是 FileReader对象的实例方法，作用就是将其中的二进制数据取出来。取出来之后呢，二进制的数据类型还是很多的，有float32，int8,unit8之类的格式，我们可以onload()回调函数中 使用new Uint8Array()   生成Unit8类型的二进制，同理，要int8的数据类型就用  new Int8Array() 方法。

具体请参考以下代码：            

封装的函数

   // 录音组件录制的用户声音二进制文件
    getBlob (data) {
      var reader = new FileReader() //生成FileReader实例
      reader.readAsArrayBuffer(data) //取出blob或者File文件的二进制原始数据
      reader.onload = function (da) { //有一个异步回调
        let yy = new Uint8Array(da.target.result) //后端需要的二进制格式
        let endd = [...yy] //后端需要的格式，我们改造成数组
        this.houDuanData = endd //保存到变量中，保存的就是我们需要的二进制数据
      }
    },