浅谈二进制文件流

二进制文件流是什么？

二进制文件是一种计算机文件格式，它的数据以二进制形式存储，与文本文件不同。二进制文件可以包含任意类型的数据，例如图像、音频、视频、可执行文件、压缩文件等，而文本文件则仅仅包含 ASCII 码或其他编码的字符数据。

二进制文件的底层原理是将数据以二进制形式存储在文件中。在计算机中，所有的数据都是以二进制形式表示的，包括数字、字符、图像、音频、视频等。二进制文件通过按照特定的格式将这些二进制数据存储在文件中，以便在需要时能够正确地读取和使用。

二进制文件流 有什么用？

技术上容易实现。用双稳态电路表示二进制数字0和1是很容易的事情

可靠性高。二进制中只使用0和1两个数字，传输和处理时不易出错，因而可以保障计算机具有很高的可靠性

运算规则简单。与十进制数相比，二进制数的运算规则要简单得多，这不仅可以使运算器的结构得到简化，而且有利于提高运算速度

二进制文件流 有那么些？

二进制流常见的 Blob、ArrayBuffer、File、FileReader和FormData

二进制 BLOB 的了解

概念：Blob全称binary large object，表示二进制大对象，它并不是前端的特有现象，而是计算机界的通用术语，MySql和Oracle数据库中，就有一种Blob类型，专门存放二进制数据

MDN解释：一个Blob对象就是一个包含有【只读原始数据】的类文件现象。通俗点说，我们可以认为Blob是一个不可修改的二进制文件

使用
构造函数：直接通过 new Blob() 就可以创建一个Blob对象

let blob = new Blob(array, options)
// array，可选，由ArrayBuffer、arrayBufferView、Blob、DOMString等对象组成
// options，可选，一个对象，用来设置Blob的一些属性，主要是一个type属性，表示Blob的类型是图片（image/jpeg、image/png）还是word（application/msword）还是pdf（application/pdf）等

简单来说，Blob就是一个只读的二进制文件，我们可以知道它的大小（size）、类型（type）、并可以对其作出分割（slice）

二进制 ArrayBuffer 的了解

它是一个二进制数据通用的固定长度容器。通俗点说，就是内存上一段连续的二进制数据。我们可以对ArrayBuffer进行读写，但需要借助它提供的工具TypeArray或 DataView

Blob和ArrayBuffer的关系：

相同点：都是二进制的容器
ArrayBuffer：ArrayBuffer更底层，就是一段纯粹的内存上的二进制数据，我们可以对其任何一个字节进行单独的修改，也可以根据我们的需要以我们指定的形式读取指定范围的数据

Blob：Blob就是将一段二进制数据进行了一个封装，我们拿到的就是一个整体，可以看到它整体属性大小、类型，可以对其进行分割，但不能了解它的细节

联系：Blob可以接收一个ArrayBuffer作为参数生成一个Blob对象，此行为就相当于对ArrayBuffer数据做一个封装，之后就是以整体的形式展现了

应用上的区别：由于ArrayBuffer和Blob的特性，Blob作为一个整体文件，适合用于传输；而只有需要关注细节的时候（比如要修改一段数据），才需要用到ArrayBuffer

二进制 File 的了解

顾名思义，就是纯粹的文件。通常表示我们使用 <input type='file' /> 选择的FileList对象，或者是使用拖拽操作搞出的DataTransfer对象
File对象也是二进制对象，从属于Blob对象。也就是说File是Blob里的一个小类，Blob的属性和方法都可以用于File，而File也有自己特有的属性和方法。

二进制 FIleReader 的了解

前面提到Blob对象是一个只读对象，但它是一个二进制对象，如果直接读取就只能拿到一堆01数据，因此需要借助专门的工具来读取，这个工具就是FIleReader

前面提到，ArrayBuffer也需要借助工具（dataView）读取数据，那和FileReader有什么区别？

ArrayBuffer的工具dataView只是简单的读取数据，最多就是将数据转为数字或字符串，但FileReader可以看做是多了一道编码的过程，通过FileReader.readAsDataURL(blob)就是将二进制数据读取并编码为base64格式，FileReader.readAsText(blob)就是将二进制数据读取并编码为字符串格式

二进制 FormData 的了解

准确来说，FormData和上述内容关系不大，它是XMLHttpRequest添加的一个新的接口，我们可以通过JavaScript用一些键值对来模拟一系列表单控件。

FormData的最大优点就是，比起普通的ajax，使用FormData可以异步上传一个二进制文件，而这个二进制文件就是上面说的Blob对象

二进制之间的转换

File 转 Bolb

 // 这里 获取 file 对象
 let file = e.target.files[0]
 // 文件的类型
 let type = file.type
 
 const reader = new FileReader()
 reader.readAsDataURL(file)
 reader.onload = function (e) {
    const blob = new Blob([file], { type })
    console.log(blob)
  }

Blob 转为 BlobUrl

    // 结合上面的 file 转 blob 或者 本身是 blob
    const blob = new Blob([file], { type })
    const blobURL = window.URL.createObjectURL(blob)

BlobUrl 转为 File

let blobUrl = 'blob:xxxx'

httpRequest(src).then(res => {
   console.log(res)
})



function httpRequest (src) {
  let that = this
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest()
    xhr.open('GET', src, true)
    xhr.responseType = 'blob'
    xhr.onload = function (e) {
      if (this.status == 200) {
        let myBlob = this.response
        console.log(myBlob)
        let map = {
          'image/jpeg': 'jpg',
          'image/png': 'png',
          'image/svg+xml': 'svg',
          'image/gif': 'gif'
        }
        let suffix = map[myBlob.type] || ''
        if (!suffix) reject(false)
        let files = new window.File([myBlob], 'avatar.' + map[myBlob.type], { type: myBlob.type }) // myBlob.type 自定义文件名
        resolve(files)
      } else {
        reject(false)
      }
    }
    xhr.send()
  })
}

base64 转为 Blob

function dataURLtoBlob(dataurl) {
	var arr = dataurl.split(","),
		mime = arr[0].match(/:(.*?);/)[1],
		bstr = atob(arr[1]),
		n = bstr.length,
		u8arr = new Uint8Array(n);
	while (n--) {
		u8arr[n] = bstr.charCodeAt(n);
	}
	return new Blob([u8arr], {
		type: mime,
	});

本文 十三博客 转载