前端页面使用js计算文件的md5和sha256

时间:2021-7-3 作者:qvyue

一篇纯代码的文章。更多的说明在代码中

import CryptoJs from 'crypto-js' import encHex from 'crypto-js/enc-hex' /** * 用于计算文件的hash值,包括sha256值和md5值 */ function hashFile (file) { /** * 使用指定的算法计算hash值 */ function hashFileInternal (file, alog) { // 指定块的大小,这里设置为20MB,可以根据实际情况进行配置 const chunkSize = 20 * 1024 * 1024 let promise = Promise.resolve() // 使用promise来串联hash计算的顺序。因为FileReader是在事件中处理文件内容的,必须要通过某种机制来保证update的顺序是文件正确的顺序 for (let index = 0; index hashBlob(file.slice(index, index + chunkSize))) } /** * 更新文件块的hash值 */ function hashBlob (blob) { return new Promise((resolve, reject) => { const reader = new FileReader() reader.onload = ({ target }) => { const wordArray = CryptoJs.lib.WordArray.create(target.result) // 增量更新计算结果 alog.update(wordArray) resolve() } reader.readAsArrayBuffer(blob) }) } // 使用promise返回最终的计算结果 return promise.then(() => encHex.stringify(alog.finalize())) } // 同时计算文件的sha256和md5,并使用promise返回 return Promise.all([hashFileInternal(file, CryptoJs.algo.SHA256.create()), hashFileInternal(file, CryptoJs.algo.MD5.create())]) .then(([sha256, md5]) => ({ sha256, md5 })) } export default { methods: { calculate ({ target: { files } }) { for (const file of files) { hashFile(file).then(console.log) } } } }

代码是一个vue组件,但没有用到特殊的vue方法,仅仅是调试的时候用了它而已。代码理论上可以用于任何框架。

代码的核心是crypto-js库的使用。

通过对文件进行切片和增量更新hash的方式对文件进行hash计算,可以避免浏览器out of memory错误

使用异步计算hash值,计算返回promise,在promise.then()中获取计算结果

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。