当前位置：首页 > news >正文

前端md5校验文件

news 2025/7/23 5:55:38

前端获取文件的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();