本文实现的断点续传只是我对断点续传的一个理解。其中有很多不完善的地方，仅仅是记录了一个我对断点续传一个实现过程。大家应该也会发现我用的都是一些H5的api，老得浏览器不会支持，以及我并未将跨域考虑入内，还有一些可能出现的一场等～巴啦啦。（怎么感觉这么多问题？？？笑～）

本文参考仓库：点我

这几天在认认真真地学习KOA框架，了解它的原理以及KOA中间件的实现方法。在研究KOA如何处理上传的表单数据的时候，我灵光一闪，这是不是可以用于断点续传？

断点续传并不是服务器端一端的自high，他还需要前端的配合，而且我只准备扒拉一个大致的雏形，所以这个功能我准备：

• 后端：手写KOA中间件处理断点数据
• 前端：原生JS

断点续传的过程不复杂，但是还是有许多小知识点需要get，不然很难理解断点续传的工作过程。实现断点续传的方式有很多，不过我只研究了ajax的方式，所以预备的小知识点如下：

KOA部分：

Headers的content-type

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryE1FeIoZcbW92IXSd

HTML的form组件一共提供三种方式的编码方法：application/x-www-form-urlencoded(默认)、multipart/form-data、text/plain。前两种方式比较常见，最后一种不太用，也不推荐使用。前两种的区别就是默认的方法是无法上传<input type="file"/>的。所以如果我们需要上传文件，那么就一定要用multipart/form-data。

form上传的raw data

在KOA中，server获取到的data都是raw data也就是未经处理的二进制数据。我们需要格式化这些数据，提取有效内容。我们来分析一下如何处理这些raw data。

当我们上传的时候，我们会发现一个现象，就是content-type还跟了一个小尾巴multipart/form-data; boundary=----WebKitFormBoundarygNnYG0jyz7vh9bjm，这个长串的字符串是用来干嘛的呢？看一眼完整的raw data :

------WebKitFormBoundarygNnYG0jyz7vh9bjm Content-Disposition: form-data; name="size"  668 ------WebKitFormBoundarygNnYG0jyz7vh9bjm Content-Disposition: form-data; name="file"; filename="checked.png" Content-Type: image/png   ------WebKitFormBoundarygNnYG0jyz7vh9bjm--

大家发现没每个字段之间都有------WebKitFormBoundarygNnYG0jyz7vh9bjm将他们分割开来。所以这里的boundary是用来分割字段的。

关于boundary

• 它的值是可以自定义的，不过浏览器会帮我们定义
• 不能超过70个字符
• 在raw data中，需要在前方加上--，也就是这样--boundary，如果是结尾的分隔符那么在末尾也加一个--，就是这样
  关键字：