SpringBoot大文件上传--前端计算文件的MD5

前端(js)计算文件的MD5

文件上传是在开发中经常遇到对的问题,小文件自然无需考虑太多,而大文件的上传就略显麻烦了,需要用到文件的MD5值来确保信息传输完整一致

MD5信息摘要算法

MD5信息摘要算法（英语：MD5 Message-Digest Algorithm），一种被广泛使用的密码散列函数，可以产生出一个128位（16字节）的散列值（hash value），用于确保信息传输完整一致。MD5由美国密码学家罗纳德·李维斯特（Ronald Linn Rivest）设计，于1992年公开，用以取代MD4算法。这套算法的程序在 RFC 1321 标准中被加以规范。1996年后该算法被证实存在弱点，可以被加以破解，对于需要高度安全性的数据，专家一般建议改用其他算法，如SHA-2。2004年，证实MD5算法无法防止碰撞（collision），因此不适用于安全性认证，如SSL公开密钥认证或是数字签名等用途。

前端代码

• 首先是引入js文件包
• spark-md5.js是一个前端开源的加密框架

 <script src="js/jquery-3.3.1.js"></script>
 <script src="js/spark-md5.js"></script>

• html 代码

 <form id="from" method="post" action="/upload" enctype="multipart/form-data">
            <table>
                <tr>
                    <td>
                        <input type="hidden" id="md5" name="md5">
                        <input id="file" name="upload" type="file">
                        <input id="submit" type="submit" value="上传">
                    </td>
                </tr>
            </table>
        </form>

-计算MD5的javascript

<script>
    //注意此方法引用了SparkMD5库 library:https://github.com/satazor/SparkMD5
    //监听文本框变化
    document.getElementById("file").addEventListener("change", function() {
        //声明必要的变量
        chunks=0;
        currentChunk=0;
        var fileReader = new FileReader();//一个用来读取文件的对象
        //文件分割方法（注意兼容性）
        blobSlice = File.prototype.mozSlice || File.prototype.webkitSlice || File.prototype.slice,
            file = document.getElementById("file").files[0],
            //文件每块分割2M，计算分割详情
            chunkSize = 2097152,
            chunks = Math.ceil(file.size / chunkSize),//文件分成了几块
            currentChunk = 0,//当前处理的第几块
            
            spark = new SparkMD5();//创建md5对象（基于SparkMD5）

       //每块文件读取完毕之后的处理
        fileReader.onload = function(e) {
            console.log("读取文件", currentChunk + 1, "/", chunks);
            //每块交由sparkMD5进行计算
            spark.appendBinary(e.target.result);
            currentChunk++;
            //如果文件处理完成计算MD5，如果还有分片继续处理
            if (currentChunk < chunks) {
                loadNext();
            } else {
                md5=spark.end();//最终的MD5
                alter("MD5:"+md5);
            }
        };

        //处理单片文件的上传
        function loadNext() {
            var start = currentChunk * chunkSize,
                end = start + chunkSize >= file.size ? file.size : start + chunkSize;
            fileReader.readAsBinaryString(blobSlice.call(file, start, end));
            //blobSlice.call(file, start, end)每次执行到blobSlice的时候就会跳转到blobSlice定义的地方,可以理解为一个循环
        }
        loadNext();
    });
</script>