分片上传好处:可以断点续传,针对较大文件传输有明显好处,以免中途传输中断还需从头开始,借助哈希算法计算每片文件的哈希值,最后计算单个文件的哈希值。
基础知识:关键是哈希算法和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();
}
};
参考链接: