js流式计算大文件sha256

小文件计算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 KBlet 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>