前端如何分片上传文件？

概述

分片上传好处：可以断点续传，针对较大文件传输有明显好处，以免中途传输中断还需从头开始，借助哈希算法计算每片文件的哈希值，最后计算单个文件的哈希值。

实现

基础知识：关键是哈希算法和HTML5的FileReader对象。哈希算法可以参考本人的另一篇文章：彻底掌握哈希算法，不再似懂非懂！
FileReader 可以参考MDN。

下面列出关键的计算文件哈希值的JavaScript代码，需要引入CryptoJS：

/**创建hash对象，md5已不再足够安全，具体使用SHA256或者SHA128视具体情况而定，
SHA256更安全但是计算量也更大**/
var fileHash = CryptoJS.algo.SHA128.create();

var fileReader = new FileReader();
var blobSlice = File.prototype.mozSlice || File.prototype.webkitSlice || File.prototype.slice;//类似截取数组的方法，用来截取单个完整的文件

var  arrayBufferToWordArray = function (ab) {
            var i8a = new Uint8Array(ab);
            var a = [];
            for (let i = 0; i < i8a.length; i += 4) {
                a.push(i8a[i] << 24 | i8a[i + 1] << 16 | i8a[i + 2] << 8 | i8a[i + 3]);
            }
            return CryptoJS.lib.WordArray.create(a, i8a.length);
        }

 fileReader.onload = function (e: any) {
 //每读取一次分片就更新一次哈希值
            fileHash.update(arrayBufferToWordArray(e.target.result));
            currentChunk++;
            if (currentChunk < chunks) {//判断是否读取完成
                let start = currentChunk * chunkSize;
                let end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
                //分片读取文件
                fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
            } else {
            //文件分片读取完成，转换成字符串
                fileMD5 = fileHash.finalize().toString();             
            }
        };

参考链接：
https://my.oschina.net/u/4404738/blog/3412099