前端md5校验文件

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