js流式计算大文件sha256

最新推荐文章于 2024-05-06 23:19:53 发布

洛了个洛

最新推荐文章于 2024-05-06 23:19:53 发布

阅读量806

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_39364136/article/details/132538445

版权

小文件计算sha256：

import sha256 from 'crypto-js/256'

console.log(sha256('message'));

大文件流式计算sha256

超大文件的sha256，不能直接用上面方法sha256(file)，这会让用户等待非常久，所以需要流式计算，原理大概就是把file切割成一小块，比如10M为一个单位来分批次计算，最后在整合成一个完整的sha256，示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>文件流式处理和SHA256哈希值生成</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
</head>
<style>
    .aaa {
        height: 20px;
        width: 1000px;
        border: 1px solid blue;
        padding: 5px;
    }
    .bbb {
        height: 100%;
        background: green;
        width: 0;
    }
</style>
<body>
  <h1>选择文件并计算SHA256哈希值</h1>
  <input type="file" id="fileInput" />
  <br>
  <br>
  <div class="aaa">
    <div class="bbb" id="aaa"></div>
  </div>
  <div>结果是：<span id="result"></span></div>

  <script>
    // 创建一个 SHA-256 的哈希对象
    const hash = CryptoJS.algo.SHA256.create();
    const bufferChunkSize = 1024 * 1024; // 64 KB
    let count = 0;
    var aaa = document.getElementById('aaa');

    function calculateSHA256(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();

        // 以流的方式读取文件
        function readChunk(start, end) {
          const slice = file.slice(start, end);
          reader.readAsArrayBuffer(slice);
        }

        // 递归读取文件的每个分块
        function processChunk(offset) {
          const start = offset;
          const end = Math.min(start + bufferChunkSize, file.size);
          count = end;

          readChunk(start, end);
        }

        // 当读取完整个文件后，计算哈希值并返回
        reader.onloadend = function () {
          const arrayBuffer = reader.result;
          const wordArray = CryptoJS.lib.WordArray.create(arrayBuffer);

          // 更新哈希对象
          hash.update(wordArray);
          console.log('start', count, file.size);
          if (count < file.size) {
            // 继续处理下一个分块
            processChunk(count);
            aaa.style.width = count / file.size * 100 + '%'
          }
          else {
            // 计算哈希值并返回
            const sha256Hash = hash.finalize();
            resolve(sha256Hash.toString());
          }
        };

        // 开始处理文件内容分块
        processChunk(0);
        
      });
    }

    // 选择文件并计算SHA256哈希值
    const fileInput = document.getElementById('fileInput');
    fileInput.addEventListener('change', async function (e) {
      const file = e.target.files[0];

      try {
        const sha256Hash = await calculateSHA256(file);
        document.getElementById('result').innerText = sha256Hash;
        console.log('SHA256哈希值:', sha256Hash);
      } catch (error) {
        console.error('计算SHA256哈希值时出错:', error);
      }
    });
  </script>
</body>
</html>