关于面试问到的切片上传

昨天面试了一家公司，本来信心满满没想到在切片上传卡了壳，然后就补习了一下前端切片上传大文件的原理和操作流程。

如果文件体积比较大，或者网络条件不好时，上传的时间会比较长（要传输更多的报文，丢包重传的概率也更大），用户不能刷新页面，只能耐心等待请求完成。

在JavaScript中，文件FIle对象是Blob对象的子类，Blob对象包含一个重要的方法slice，通过这个方法，我们就可以对二进制文件进行拆分

const chunks = [] //定义一个容器

const max = 1024 * 200 // 定义切片数据大小

const count = Math.ceil(file.size/max) // 切片数量

let index = 0

while （index < count）{

chunks.push(file.slice(index * max , (index + 1) * max)

index ++

}
这样就拿到切片后的数组，再循环遍历chunks发请求给服务器，在后端需要将多个相同文件的切片还原成一个文件，可如何识别多个切片是来自于同一个文件？所以需要一个唯一且具有共同特点的标识符。

我们可以通过sparkMD5根据文件的二进制内容计算文件的MD5值，这样只要文件内容不一样，则标识也会不一样

同时可以在每个切片请求上传递一个相同文件的参数，这样就具有了相同标识，在后台拼接切片时，可以通过index来按照顺序来拼接，这样就完成了一个简单的切片上传。