文件分片上传【前端】

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

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;const md5 = hex_md5(bolb);

2：接收服务端的返回结果判断上传文件的方式，服务端可返回已上传、未上传、上传一部分三种状态。

3：如当我们接收到未上传状态后。对文件进行分片（每片建议不超过10M）。依次将分片上传，上传信息有（分片MD5值，分片总数，当前分片索引，分片数据等）。当一片上传完成后再回调函数上传下一片

const shardSize = 5 * 1024 * 1024; // 以5MB为一个分片 // 计算每一片的起始与结束位置
const start = this.state.i * shardSize;
const end = Math.min(size, start + shardSize); form.append("uuid", uuid);  //文件ID
form.append("action", "upload"); // 直接上传分片
form.append("filemd5", filemd5); // 文件MD5form.append("md5", md5); // 分片MD5
form.append("name", name); //文件名
form.append("size", size); // 文件大小
form.append("total", shardCount); // 总片数
form.append("index", this.state.i + 1); // 当前是第几片
form.append("data", file.slice(start, end)); // 使用slice方法用于切出文件的一部分

4：这里我们使用axios请求，分片上传过程中利用onUploadProgress获得文件上传进度。并且存在一个state变量stateData来控制是否继续上传，stateData初始值为true，当点击取消上传按钮时stateData为false，停止上传，并向服务端发起取消请求，服务端删除已经上传的分片。当点击中止上传按钮时stateData为false，停止上传。

5：如果收到上传一部分状态后。将文件进行分片，在发送每个分片之前先发送检测请求，后端将检测改分片是否上传，未上传的情况下上传该分片，已上传时跳过继续检测下一分片。

const shardSize = 5 * 1024 * 1024; // 以5MB为一个分片 // 计算每一片的起始与结束位置
const start = this.state.i * shardSize;
const end = Math.min(size, start + shardSize);
if(!this.state.action) {form.append("action", "check"); // 检测分片是否上传
} else {form.append("action", "upload"); // 直接上传分片form.append("data", file.slice(start, end)); // slice方法用于切出文件的一部分
}
form.append("uuid", uuid);  //文件ID
form.append("action", "upload"); // 直接上传分片
form.append("filemd5", filemd5); // 文件MD5form.append("md5", md5); // 分片MD5
form.append("name", name); //文件名
form.append("size", size); // 文件大小
form.append("total", shardCount); // 总片数
form.append("index", this.state.i + 1); // 当前是第几片