阅读 52

二进制学习——Blob,ArrayBuffer、File、FileReader和FormData的区别

前言:

  • Blob、ArrayBuffer、File、fileReader、formData这些名词总是经常看到,知道一点又好像不知道,像是同一个东西好像又不是,总是模模糊糊,最近终于下决心要弄清楚。
  • 为了更好的理解每个名词的意义,本文先用尽量通俗的语言解释下各自的区别,大概能在宏观上区分之后,再会在其他博文中做单个解释。
  • 这些名词里,Blob、ArrayBuffer、File可以归为一类,它们都是数据;而fileReader算是一种工具,用来读取数据;formData可以看做是一个应用数据的场景。因此,我们首先着重区分Blob、ArrayBuffer、File,然后再对fileReader和formData做简要介绍。

blob

概念理解

  • Blob的全称是binary large object,表示二进制大对象,并不是前端的特有对象,而是计算机界的通用术语,MySql/Oracle数据库中,就有一种Blob类型,专门存放二进制数据。
  • MDN中官方的解释是:一个Blob对象就是一个包含有只读原始数据的类文件对象。通俗点,我们可以直接将Blob看做是一个不可修改的二进制文件。

使用

  • 构造函数

直接通过new Blob()就可以创建一个Blob对象

var aBlob = new Blob( array, options );
复制代码

array(可选):是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ,或者其他类似对象的混合体。(暂时可以不用理解,就可以看作是一堆数据)
options(可选):一个对象,用来
设置Blob的一些属性。主要的是一个type属性,表示Blob的类型(其他暂时也不用管)。
简单来说,就是可以通过向new Blob()传一堆数据,生成一个Blob对象

  • 属性

Blob.size(只读):Blob对象中包含的数据大小(字节)
Blob.type(只读):表明该Blob对象所包含数据的MIME类型。例如若为图片,此字段就类似为’image/jpeg‘。如果类型未知,则该值为空字符串。

  • 方法

Blob只有一个slice方法,实现对文件的分割(注意这里并不违背Blob的只读性,slice只是只是复制指定范围内的Blob数据)。

Blob.slice(start, end ,contentType)
复制代码

start:开始索引,可以为负数,语法类似于数组的slice方法。默认值为0。
end:结束索引,可以为负数,语法类似于数组的slice方法。默认值为最后一个索引。
contentType:新的Blob对象的MIME类型,这个值将会成为新的Blob对象的type属性的值,默认为一个空字符串。

小结

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

ArrayBuffer

ArrayBuffer的概念和用法相对比较复杂(它本身不复杂,只是使用方式比较丰富),之后会在另外一篇博客作出解释,这里仅做简要说明,主要是理解它的宏观概念。

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

blob与ArrayBuffer的关系

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

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读取为不同的格式,具体将在另一篇博文中讲到。

Q:前面提到,ArrayBuffer也需要借助工具(以dataView为例)读取数据,那和fileReader有什么区别呢?
A:我理解的,ArrayBuffer的工具dataView只是简单的读取数据,最多就是讲数据转为数字或字符串;但fileReader可以看做是多了一道编码的过程,通过FileReader.readAsDataURL(blob)就是将二进制数据读取并编码为Base64格式,FileReader.readAsText(blob)就是将二进制数据读取并编码为字符串形式。

FormData

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

参考:
www.zhangxinxu.com/wordpress/2…

www.cnblogs.com/youhong/p/1…

文章分类
前端
文章标签