前言
文件上传作为一个非常常见的功能，开发同学必须掌握，本系列将还原文件上传的各种场景，彻底掌握文件上传，晋升高级开发。
前置知识
blob
串行化的二进制大对象，代表了一段二进制数据，提供了一种分片读取其内容的方法。Blob 通常用来处理大文件或者二进制数据，如图片、音频等。
blob.prototype.slice，blob 接口的 slice() 方法创建并返回一个新的 Blob 对象，该对象包含调用它的 blob 的子集中的数据。说人话就是原文件的切片
File、FileList
File 对象继承自 Blob，可以使用 Blob 的所有方法。FIle 对象可以来自 input 元素上选取的文件，也可以是拖拽操作中的 DataTransfer 对象。
FileList 通常来自 input 元素的 files 属性，是一个类数组的结构，由 File 组成。
formData
FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过 XMLHttpRequest.send() 方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。
可以使用 new FormData()的方式创建 formData 对象，也可以来自 form 元素的事件。
form
HTML <form> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。
当你用 form 标签时，将method 设置为 post 并且 enctype 设置为 multipart/form-data的时候，发送出去的 content-type 是multipart/formData格式。在请求头的 Content-Type 里可以看到。
content-type
Content-Type 实体头部用于指示资源的 MIME 类型
blob, file, formData的关系？
FormData 对象是一种向服务器发送表单数据（包括文件数据）的方式，我们可以使用 FormData 对象的键值对存放数据，当进行文件上传时，通常将 File 或 Blob 对象附加到 FormData 对象，并使用 fetch 或 XMLHttpRequest 发送到服务器。
原理
前后端的数据交互，一般使用文本数据，但文件上传本质上是将二进制数据传送给服务器。想要将文件传给服务器，必须选择支持二进制的格式。一般从文件选取器里拿到的对象是 FIle 或者 FileList 格式，我们可以使用 XMLHttpRequest 对象或者 form 表单发送请求，通常请求头里的传输格式是 multipart/formData，它支持同时发送文本和二进制数据。
示例
使用 input 标签，获取本地文件，通过 ajax 或者 form 表单发送到服务器。
前端
服务端
这里我们使用 Multer 这个库处理文件，Multer 是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它主要用于上传文件。
服务端的示例中，我们暂时不需要知道每个中间件的实现细节，只需要大概清楚是干什么的就行了
小结
这篇文章主要是梳理一下文件上传的原理，其中 formData、content-type、blob、File、form 表单这些东西的区别和联系一定要搞清楚。然后我们用一个非常简单的前后端示例，来展示一下单文件上传的情况。下一篇文章我们将了解如何上传进行单个大文件切片上传。如果这篇文章对你有帮助，希望能点个赞和收藏支持一下！
参考文章
developer.mozilla.org/zh-CN/docs/…
developer.mozilla.org/en-US/docs/…
developer.mozilla.org/en-US/docs/…
developer.mozilla.org/zh-CN/docs/…
developer.mozilla.org/zh-CN/docs/…
