html5 二进制文件操作基础

Blob、ArrayBuffer、File、fileReader、formData这些名词总是经常看到,

这些名词里,Blob、ArrayBuffer、File可以归为一类,它们都是数据;而fileReader算是一种工具,用来读取数据;formData可以看做是一个应用数据的场景。

arraybuffer与blob的区别

ArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区。
Blob (binary large object),他表示一个不可变、原始数据的类文件对象,
blob类型只有slice方法,用于返回一个新的 Blob对象,包含了源 Blob对象中指定范围内的数据。
对比发现,ArrayBuffer的数据,是可以按照字节去操作的,而Blob的只能作为一个整的对象去处理。
所以说,ArrayBuffer相比Blob更接近真实的二进制,更底层。

 

Blob 与 ArrayBuffer 的关系

  • 相同点: Blob和ArrayBuffer都是二进制的容器;
  • ArrayBuffer:ArrayBuffer更底层,就是一段纯粹的内存上的二进制数据,我们可以对其任何一个字节进行单独的修改,也可以根据我们的需要以我们指定的形式读取指定范围的数据
  • Blob:Blob就是将一段二进制数据做了一个封装,我们拿到的就是一个整体,可以看到它的整体属性大小、类型;可以对其分割,但不能了解到它的细节
  • 联系:Blob可以接受一个ArrayBuffer作为参数生成一个Blob对象,此行为就相当于对ArrayBuffer数据做一个封装,之后就是以整体的形式展现了
  • 应用上的区别:由于ArrayBuffer和Blob的特性,Blo作为一个整体文件,适合用于传输;而只有需要关注细节(比如要修改某一段数据时),才需要用到ArrayBuffer

 

arraybuffer与blob 相互转换

// arraybuffer转blob很方便,作为参数传入就行了。
 
var buffer = new ArrayBuffer(16)
var blob = new Blob([buffer])

 

此处需要借助fileReader对象:
 
var blob = new Blob([1,2,3,4,5])
var reader = new FileReader()
 
reader.onload = function() {
    console.log(this.result)
}
reader.readAsArrayBuffer(blob)
 
// 控制台输出的则是ArrayBuffer的数据了。

 

Blob就是一个只读的二进制文件,
我们可以知道它的
文件大小(size),
文件类型(type),
并可以对其作出分割(slice)。
------------------------------------------------------------

构建一个Blob对象通常有三种方式:

通过Blob对象的构造函数来构建。
从已有的Blob对象调用slice接口切出一个新的Blob对象。
canvas API toBlob方法,把当前绘制信息转为一个Blob对象。下面只看第一种的实现:

 

 

File

概念理解

  • File 根据名字很容易理解,就是纯粹的文件。通常,表示我们使用 <input type="file"> 选择的 FileList 对象,或者是使用拖拽操作搞出的 DataTransfer 对象。
  • File 对象也是二进制对象,从属于 Blob;也就是说 File 是 Blob 里的一个小类,Blob 的属性和方法都可以用于 File,而 File 自己也有自己特有的属性和方法。对于 Blob 和 File 都有的属性,推荐使用 Blob 的属性

使用

这里就不做过多介绍了,可以直接参考MDN上的介绍

小结

File 就是 Blob里面的一个小类,继承 Blob 的方法和属性,拥有自己特有的属性。通常表示 <input type="file"> 里的 FileList 对象

 

FileReader

前面提到Blob对象时一个只读对象,但它是一个二进制对象,如果直接读取就只能拿到一堆01数据,因此需要借助专门的工具来读取,这个工具就是 FileReader。
通过 FileReader 可以将 Blob 读取为不同的格式

 

FormData

准确来说,FormData其实与上述内容关系就不大了。它是XMLHttpRequest Level 2添加的一个新的接口,我们可以通过JavaScript用一些键值对来模拟一系列表单控件。FormData的最大优点就是,比起普通的ajax, 使用FormData我们可以异步上传一个二进制文件,而这个二进制文件,就是我们上面讲的Blob对象。

posted @ 2023-01-28 16:03  青幽草  阅读(305)  评论(0编辑  收藏  举报