在前端中处理文件时会经常遇到File、Blob、ArrayBuffer以及相关的处理方法或方式如FileReader、FormData等等这些名词，对于这些常见而又不常见的名词，我相信大多数人对它们都有一种熟悉的陌生人的感觉。究其原因，相关的东西接触的不够多，且每次都网上随手拈来，不求甚解。今天，我们就稍微仔细一点，去做一个探究，弄清他们是谁，能做什么，又有什么区别，争取下次再见既是“老朋友”。如果，你想更深入的了解相关知识点，可以参阅w3c和MDN的解释，文后会附上相关的参考链接供参考。
内容 File 定义/概念File即我们通常所说的文件，我们硬盘里存储的音视频、文档等等都是文件。我们通常使用<input type="file">来选取并读取本地计算机中的文件，返回一个Filelist对象，此对象为一个类数组可迭代对象。File对象是特殊类型的Blob,所以顺便也继承了Blob特有的方法和属性,同时又有自己独特的属性和方法。
MDN定义：文件（File）接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。通常情况下， File 对象是来自用户在一个 <input> 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象，或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。
用法/示例File常用的属性有：
File.name 只读,返回当前File 对象所引用文件的名称。
File.size 只读,返回当前File 对象文件的大小。
File.type 只读,返回文件的多用途互联网邮件扩展类型（MIME Type）
更多属性及方法信息可参考MDN,这里就不再详细赘述。
FileList: <input type="file"> 元素有一个files属性,用来存储用户所选择的文件,当用户点击选择文件按钮之后，便可以获取到选择的文件组成的FileList对象。
1
2
const fileList = document.getElementById('file').files;
console.log(fileList);