前言：

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

前端上传文件保存到变量中_接着奏乐接着舞。的博客-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 //保存到变量中，保存的就是我们需要的二进制数据
                前端学习笔记202303学习笔记第三天-Vue3.0-webpack访问自动打包生成的文件1
            
前端学习笔记202303学习笔记第三天-Vue3.0-webpack访问自动打包生成的文件1
                前端学习笔记202303学习笔记第三天-Vue3.0-webpack访问自动打包生成的文件1
            
前端学习笔记202303学习笔记第三天-Vue3.0-webpack访问自动打包生成的文件1
                《智能前端技术与实践》——第 2 章 前端开发基础 ——2.7 微信小程序开发——2.7.3 页面样式文件
            
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.7 微信小程序开发——2.7.3 页面样式文件
                《智能前端技术与实践》——第 2 章 前端开发基础 ——2.7 微信小程序开发——2.7.4 逻辑层文件
            
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.7 微信小程序开发——2.7.4 逻辑层文件