前端文件操作
浏览器由于安全性要求，不允许JS直接获取主机的文件系统上的文件，只能通过HTML标签input[type=file]来由用户选择可以被浏览器操作的文件。
那么input[type=file]标签选择的文件，会被如何保存呢？
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="file"/>
</body>
</html>
files属性的类型是FileList，从名字就可以看出它是一个类数组，类数组元素是File类型对象 那么如果input[type=file]标签选择多个文件（标签加一个multiple属性），它的files中应该会包含多个File对象元素
File是啥
File - Web API 接口参考 | MDN (mozilla.org)
MDN关于File的介绍：
作用：
文件（File）接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。
如何产生File对象：
通常情况下， File 对象是来自用户在一个 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象，或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。
File对象的属性
lastModified 只读。返回当前 File 对象所引用文件最后修改时间的毫秒数。 lastModifiedDate 只读。返回当前 File 对象所引用文件最后修改时间的 Date 对象。（废弃） name 只读。返回当前 File 对象所引用文件的名字。 size 只读。返回当前 File 对象所引用文件的大小。 type 只读。返回当前 File 对象所引用文件的MIME类型 webkitRelativePath 只读。返回 File 相关的 path 或 URL。（不推荐） 其中lastModifiedDate，webkitRelativePath不推荐使用
剩下的属性也比较好理解，都是文件常见的信息，比如文件名，文件类型，文件大小，文件最后修改时间，需要注意这些File对象属性都是只读的。
File对象没有定义任何方法，它的方法都继承自Blob。File实例对象可以沿着原型链访问到Blob.prototype上的方法
Blob是什么
Blob - Web API 接口参考 | MDN (mozilla.org)
MDN对于Blob介绍是：Blob 对象表示一个不可变、原始数据的类文件对象。
啥叫类文件对象？
Blob翻译过来是 Binary Larger Object，即二进制大对象。即Blob对象的组成是二进制数据。
而我们知道文件也是二进制编码的数据。
那么为什么Blob叫类文件呢，而不是文件呢？
其实Blob在这里代表的是比文件更加底层的概念。
我们知道文件是由二进制数据组成的，那么我们随意编写一些二进制数据，它能代表一个文件吗？答案是不能。文件的二进制数据具有各种特殊标识，来帮助外部理解一堆二进制数据是一个文件。
Blob代表的其实就是文件的切片。
我们知道文件的二进制数据组合在一起才能代表文件，而文件的二进制数据被分段后，比如分成十段，那么每一段都无法表示文件。但是每一段又都是文件的必不可少的组成部分。
此时就需要Blob来表示这些文件切片。所以说Blob是一个类文件对象。它不是文件，但是却和文件有千丝万缕的关系。
在浏览器API中，Blob是File的父类，这很好理解，父类是基类，子类是扩展类，我们可以说文件File是一堆二进制数据，是一个特殊的Blob，它可以当成Blob。但是它又比Blob多了一层含义。
Blob对象的属性：
size 只读。Blob 对象中所包含数据的大小（字节）。 type 只读。一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。 有人说Blob对象咋还有文件才有的MIME类型呢？它不就是一个二进制数据对象吗？
还是要再说明一下，Blob对象相当于File对象的切片，如何标识一个文件切片属于什么文件类型是有必要的，它涉及都二进制数据的解析。
Blob对象的方法：
Blob.slice([start[, end[, contentType]]]) 返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。
Blob.stream() 返回一个能读取blob内容的 ReadableStream。
Blob.text() 返回一个promise且包含blob所有内容的UTF-8格式的 USVString。
Blob.arrayBuffer() 返回一个promise且包含blob所有内容的二进制格式的 ArrayBuffer
Blob构造函数
Blob(blobParts[, options])
返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
其中blobParts参数是一个数组，数组中的每一项元素连接起来构成Blob对象的数据，数组中的每项元素可以是ArrayBuffer, ArrayBufferView, Blob, DOMString 。
options：可选项，字典格式类型，可以指定如下两个属性：
type，默认值为 ""，它代表了将会被放入到blob中的数组内容的MIME类型。
endings，默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个：
"native"，表示行结束符会被更改为适合宿主操作系统文件系统的换行符； "transparent"，表示会保持blob中保存的结束符不变。
