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

àì夳堔傛蜴生んèń 2023-09-28 18:42 11阅读 0赞

**目录**

前言：

使用场景：

封装的函数

--------------------

### 前言： ###

> 按理说，咱前端使用二进制的场景主要是**文件以二进制格式的数据上传到后端**，或者将后端**返回的二进制数据文件下载**并解析成文件，关于以上两种场景，可以看我之前的文章。
> 
> [前端上传文件保存到变量中\_接着奏乐接着舞。的博客-CSDN博客][-CSDN]
> 
> --------------------
> 
> 一般情况下，都是给后端一个File文件就完事了，但是有时候后端就非要二进制数据流。
> 
> --------------------
> 
> **这篇文章主要是写如何将Blob文件或者File文件转成二进制数据，并且将数据转换成后端需要的，最后加密发给后端。**

### 使用场景： ###

> **前端使用recorder.js以及websoket,实现前端录音，将音频文件以二进制数据流的形式，加密后发送给后端。**
> 
> **ps1：前端录音和websoket的功能我有写博客。**
> 
> [vue基于websocket实现智能聊天及吸附动画效果\_接着奏乐接着舞。的博客-CSDN博客\_vuewebsocket聊天][vue_websocket_-CSDN_vuewebsocket]
> 
> [vue悬浮框自由移动+录音功能\_接着奏乐接着舞。的博客-CSDN博客\_vue浮动框][vue_-CSDN_vue]
> 
> **ps2:后端需要的二进制数据格式是unit8，这个应该是因人而异的，不过不管用啥，其实很简单就把我的例子unit8那里改成你们约定的格式。**

--------------------

###  ###

![f6f4909fc0a94f09999b8d67efd2d29c.png][]

![71a70b3a44af4346980a4f802c8f38c2.png][]

--------------------

>  由上图可知，其实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 //保存到变量中，保存的就是我们需要的二进制数据
           
          }
        },

[-CSDN]: https://blog.csdn.net/wanghaoyingand/article/details/125449101?spm=1001.2014.3001.5501
[vue_websocket_-CSDN_vuewebsocket]: https://blog.csdn.net/wanghaoyingand/article/details/125659423?spm=1001.2014.3001.5501
[vue_-CSDN_vue]: https://blog.csdn.net/wanghaoyingand/article/details/125661706?spm=1001.2014.3001.5501
[f6f4909fc0a94f09999b8d67efd2d29c.png]: https://img-blog.csdnimg.cn/f6f4909fc0a94f09999b8d67efd2d29c.png
[71a70b3a44af4346980a4f802c8f38c2.png]: https://img-blog.csdnimg.cn/71a70b3a44af4346980a4f802c8f38c2.png