前端获取文件的md5值,与文件一同传到后端,后端同样对md5值进行校验。如果相同,则文件未被损坏(其实这种方式优点类似于tcp、ip的差错校验,好像token也是这种方式)
项目准备
前端并不可能手写一个算法来实现校验,于是在gitHub上找到一个spark-md5的js插件
SparkMD5库 library:https://github.com/satazor/SparkMD5
npm i spark-md5 -save
代码处理
在处理过程中,需要注意的是file.onload是一个异步事件,因此使用时需要使用promise封装一下,才能得到异步的返回值
,然后在后面处理ajax请求
export default function (file) {
return newPromise(resolve, reject)
{
//声明必要的变量
let fileReader = new FileReader()
//文件分割方法(注意兼容性)
blobSlice = File.prototype.mozSlice || File.prototype.webkitSlice || File.prototype.slice,
//文件每块分割2M,计算分割详情
chunkSize = 2097152,
chunks = Math.ceil(file.size / chunkSize),
currentChunk = 0,
//每块文件读取完毕之后的处理
fileReader.onload = function (e) {
console.log("读取文件", currentChunk + 1, "/", chunks);
//每块交由sparkMD5进行计算
spark.appendBinary(e.target.result);
currentChunk++;
//如果文件处理完成计算MD5,如果还有分片继续处理
if (currentChunk < chunks) {
loadNext();
} else {
console.log("finished loading");
console.info("计算的Hash", spark.end());
}
//处理单片文件的上传
function loadNext() {
var start = currentChunk * chunkSize,
end = start + chunkSize >= file.size ? file.size : start + chunkSize;
fileReader.readAsBinaryString(blobSlice.call(file, start, end));
}
loadNext();
}
}
}
如果是前端生成文件流,则
let blob = new Blob([text],type:'application/octet-stream')
//blob 转arraybuffer类型 另一篇文章
let md5 = SparkMD5.ArrayBuffer.hash(arraybuffer).toString().toUpperCase();
spark-md5 的详解博客推荐
https://blog.csdn.net/qq_36017964/article/details/131247303