spark.md5.js获取文件的md5值

需求：需要获取上传文件整体的md5值，然后传给后端，所以采用spark.md5.js代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"

墨语轩

4913人浏览 · 2020-12-10 11:34:33

墨语轩 · 2020-12-10 11:34:33 发布

需求：需要获取上传文件整体的md5值，然后传给后端，所以采用spark.md5.js

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" id="file" />
    <script src="spark.md5.js"></script>
    <script>
        document.getElementById('file').onchange = function(ev){
            let file = this.files[0];
            let fileReader = new FileReader();

            fileReader.onload = function(ev){
                let fileMd5 = SparkMD5.ArrayBuffer.hash(ev.target.result);
                console.log(fileMd5);
                console.log(file);
            }

            fileReader.readAsArrayBuffer(file);
        }
    </script>
</body>
</html>

如果文件过大上述方法效率并不高，于是我们采用对文件分片读取然后分片加入 spark 对象的计算方法中，一片一片读取计算，最后得出文件最终的 md5 值：

document.getElementById('file').addEventListener('change', function () {
    var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
        file = this.files[0],
        //以2MB为一个分片, Read in chunks of 2MB
        chunkSize = 2097152, 
        //计算该文件一共有多少个分片
        chunks = Math.ceil(file.size / chunkSize),
        //当前分片
        currentChunk = 0,
        //创建一个spark md5计算arrayBuffer的对象
        spark = new SparkMD5.ArrayBuffer(),
        //创建fileReader对象
        fileReader = new FileReader();
    //当前分片读取完成
    fileReader.onload = function (e) {
        //当前的分片和总分片可以了解当前上传的进度
        console.log('read chunk nr', currentChunk + 1, 'of', chunks);
        // Append array buffer
        spark.append(e.target.result); 
        //计数累加
        currentChunk++;

        if (currentChunk < chunks) {
            //当前分片的md5 hash值
            console.log('current chunck hash:',SparkMD5.ArrayBuffer.hash(e.target.result));
            //不是最后一个分片，加载下一个分片
            loadNext();
        } else {
            console.log('finished loading');
            // Compute hash
            //最后一个分片，结束，spark.end()就是最后文件的MD5hash值
            console.info('computed hash：', spark.end()); 
        }
    };
    //错误
    fileReader.onerror = function () {
        console.warn('oops, something went wrong.');
    };

    //读取文件分片
    function loadNext() {
        //开始位置
        var start = currentChunk * chunkSize,
        //结束位置
            end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
        //fileReader读取下一个文件分片
        fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
    }
    //首次调用开始读取文件分片
    loadNext();
});

上述方法还可以用来在大文件分片上传时使用，先计算整个文件的 MD5 值传给后台用于区分多个文件，然后上传每个分片和该分片的 md5 值，这样就可以做到断点续传等功能。

地址：

spark.md5.js npm地址

spark.md5.js 单独地址

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

UFW防火墙安全指南

UFW（Uncomplicated Firewall）是Ubuntu/Debian系统中简化防火墙管理的工具，通过直观命令帮助用户有效控制网络流量，提升系统安全性。文章详细介绍了UFW的基本命令，包括启停防火墙、添加规则、限制连接速率和日志配置等操作，并提供了安全最佳实践，如默认拒绝策略、IP地址限制和服务级规则管理。同时，还涵盖高级配置技巧，例如多网络接口设置、规则优先级调整、IPv6支持及与f