DAY12 - 档案类的物件关系厘清(1) - File, FileList, Blob

前端网页若要取得一个档案，大家可能第一个画面就是下面这个UI吧！是利用<input type="file">，选择本地端档案的画面

我们透过这个方式选择了一个档案後，这个档案会是怎麽呈现？“档案”本身是什麽呢？选择了档案之後，我们用console印出来选择的这个档案如下：

可以看到这个被选择的档案是一个在FileList中的File的物件，那什麽是FileList, 什麽是File? 今天就让我们深入解析一下关与档案类的物件关系吧

FileList, File Blob关系图

Blob物件(Binary large Object) = 二进位类型的大物件

Blob其实不是javascript独有的。最早Blob是应用在在资料库管理中，用於储存影音、大型文件或图档。这些大型档案，无法储存在一般的常规资料库中，因此有了Blob的资料型态，储存大量的非结构化物件资料。

在前端网页的Blob

Blob 物件为一个不可变、相当於档案(原始资料)的类档案物件。在前端网页最大的贡献应该就是可以让我们更方便地处理档案相关的操作ex. 分片上传、图档预览等等，後面都会接续提到。透过Blob，javaScript才能读写二进位资料的档案。

Blob的属性

Blob主要包含两个属性

• Blob.size(read only)：
  物件中所包含资料的大小（位元组）
• Blob.type(read only)：
  一个字串，表此 Blob 物件所包含资料的 MIME 型别。若型别未知，则值为空字串。

小小备注：MIME 型别 - MIME Type (Multipurpose Internet Mail Extensions Type)

一种用来描述档案格式的标准化方式，Ex.图档可能就会是image/png。也可以称为「媒体类型」（media type）、「内容类型」（content type)。浏览器通常使用MIME type，而「不是」我们一般看到的档案的副档名(file extention)来决定怎麽处理这份文件。

Blob的方法

• arrayBuffer
  return Promise 物件且包含 blob 所有内容的二进位格式的ArrayBuffer
• slice([start[, end[, contentType]]])
  会return一个新的blob，并可指定范围的资料
  PS.由於File继承自Blob，可用在开发上传档案的分片上传，就是利用此方式分割档案。
• stream
  return一个能读取blob内容的 ReadableStream
• text
  return一个Promise物件，包含blob所有内容UTF-8格式的 USVString

File

File 继承了 Blob，所以拥有Blob有的 size 和 type 属性，和Blob最大的不同之处在於有实际参照到档案系统中的档案：简单一点来说，就是他就是从实际的档案产生出来的档案物，不是新增先新增了一个物件在关联到档案内容。因此也新增了File多的属性：

File的属性

• size (blob就拥有的属性)
• type (blob就拥有的属性)
• name
• lastModified
• lastModifiedDate
• webkitRelativePath

怎麽产生一个File物件

前端可以透过两个方式

1. <input type="file"> 所选择的档案
   
2. 拖曳中生成的DataTransfer物件中
   

FileList

透过 <input type="file">选取档案後的物件，即为FileList，是一个可藉此存取使用者选取之档案的类阵列物件。FileList中可以包含一个档案或多个档案。

选取一个档案

选取多个档案

参考资料

• 超好用的Blob物件：https://www.gushiciku.cn/pl/2oK7/zh-tw
• https://zhuanlan.zhihu.com/p/146577946
• https://iter01.com/543189.html