import SparkMD5 from 'spark-md5'; var hexHash = SparkMD5.hash('Hi there'); // hex hash var rawHash = SparkMD5.hash('Hi there', true); // OR raw hash (binary string)
这是最简单的生成hash的方法,但是如果是大文件断点续传的话,这种方式获取hash码就不行了。因为你上传的文件可能2G,4G,5G甚至更大,你的内存根本盛不下,这时候就需要换一种计算hash的方法了。
function calcMD5(file,callback){ this.upstate="MD5计算中..."; this.percent=0; let chunkSize=2097152, chunks=Math.ceil(file.size/chunkSize), currentChunk=0, spark=new SparkMD5.ArrayBuffer(), fileReader=new FileReader(); fileReader.onload=(e)=>{ //对于读取的文件计算hash码。 spark.append(e.target.result); currentChunk++; this.percent=((currentChunk/chunks)*100).toFixed(2)-0; if(currentChunk<chunks){ loadNext(); }else{ callback(spark.end()); } } //分次读取大文件的内容, function loadNext(){ let start=currentChunk*chunkSize, end=((start+chunkSize)>=file.size)?file.size:start+chunkSize; fileReader.readAsArrayBuffer(file.slice(start,end)); } loadNext(); },
上面这个方法,通过分片读取文件,并将读取的文件内容添加到sparkMD5的hash计算中,直到文件读取完毕,最后返回最终的hash码到callback回调函数里面。这种方法理论上读取的文件可以无限大。
web中我们通过sparkMD5计算文件的hash码,传递到后台,后台查询此hash码,如果查询到,则表明此文件已经上传过,或者已经上传过一部分,如果是上传了一部分,则返回已上传的字节数,前端通过slice方法分割文件传输剩余的部分,就可以实现断点续传了。
这里暂对断点续传的原理做简单介绍,下篇文章将详细阐述断点续传的过程以及贴出实现代码,敬请关注