文件分片上传【前端】

·····················断更有点久了，工作太忙，个人太散漫了。还是要学会坚持写博客，毕竟也是自己学习进步的体现。闲话少说，直接进入今天的正题，文件的分片上传。
先介绍一下文件的分片上传。

1、分片上传的原理

分片上传功能是将一个文件切割为一系列特定大小的小数据片，分别将这些小数据片分别上传到服务端，全部上传完后再由服务端将这些小数据片合并成为一个完整的资源。在上传过程中一旦遭受外部因素导致的上传中断，在下次上传时将坚持该文件上传的上传进度，然后接着上次上传进度继续上传，这也就是断点续传。

2、文件分片上传的意义

在上传普通大小文件时，分片上传和普通上传的效果体验相差不大。
但是在上传大型文件时，普通传统上传方式存在的弊端有：

1：文件上传速度缓慢
2：各种原因（断网，页面关闭等等）引起的文件上传失败导致文件丢失，需重新上传 而分片上传有效避免了传统上传方式引起的弊端。

已有的分片上传组件 百度：WebUploader

为什么不直接使用百度的分片上传呢？是写的不好还是什么呢？当然不是，这个组件的功能还是很强大的，我们不用的原因是，可能在很多功能需求上这个组件并不满足我们的需求，我们花很多时间去改组件的UI和功能为什么不自己写一个更方便呢。

3、分片上传的实现

分片上传的整个流程大致如下：
(1) 将需要上传的文件按照一定的分割规则，分割成相同大小的数据块；

(2) 向服务端发送上传请求，上传时携带完整文件的唯一标识（建议使用MD5加密值就行），服务端判断该文件是否存在，不存在是返回同意上传信息。

(3) 接收到服务端同意上传后，按照一定的策略（串行或并行）发送各个分片数据块，每个分片携带分片信息（分片总数，分片索引，分片唯一索引，分片数据等），采用并行可实现分片秒传的功能，采用串行更好实现断点续传的功能。

(4) 发送完成后，服务端根据判断数据上传是否完整，如果完整，则进行数据块合成得到原始文件。

4、代码实现

这里使用原生input组件再react环境来实现分片上传

1：先向服务端发送文件的唯一标识，判断文件是否已经上传JavaScript是不能直接直接对文件进行MD5加密，这里我们要使用FileReader对象，FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件，使用FileReader对象，web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容，可以使用File对象或者Blob对象来指定所要处理的文件或数据。

const r = new FileReader();
r.readAsBinaryString(file);
r.onload = e => {
   
    const bolb = e.target.result