在 JavaScript 中散列文件的机制答案

【问题标题】：Mechanisms for hashing a file in JavaScript在 JavaScript 中散列文件的机制
【发布时间】：2019-02-27 07:23:12
【问题描述】：

我对 JavaScript 比较陌生，我想获取文件的哈希值，并希望更好地了解该过程背后的机制和代码。

那么，我需要什么：上传到我网站的文件的 MD5 或 SHA-256 哈希。

我对其工作原理的理解： 文件通过“文件”类型的 HTML input 标记上传，然后将其转换为二进制字符串，然后对其进行哈希处理。

到目前为止我所拥有的：我设法获得了“文本”类型输入的哈希值，以及不知何故上传文件的哈希值，尽管哈希值不匹配我在网上查看的网站，所以我猜它散列了文件的其他一些细节，而不是二进制字符串。

问题 1：我对文件如何散列的理解是否正确？意思是，它是被散列的二进制字符串吗？

问题 2：上传文件、散列文件并显示输出的代码应该是什么样的？

提前谢谢你。

【问题讨论】：

查看这个话题：stackoverflow.com/questions/768268/…

标签： javascript html file hash binary

【解决方案1】：

基本上是的，它就是这样工作的。
但是，要生成这样的哈希，您不需要自己转换为字符串。相反，让SubtleCrypto API 自己处理它，只需传递文件的 ArrayBuffer。

async function getHash(blob, algo = "SHA-256") {
  // convert your Blob to an ArrayBuffer
  // could also use a FileRedaer for this for browsers that don't support Response API
  const buf = await new Response(blob).arrayBuffer();
  const hash = await crypto.subtle.digest(algo, buf);
  let result = '';
  const view = new DataView(hash);
  for (let i = 0; i < hash.byteLength; i += 4) {
     result += view.getUint32(i).toString(16).padStart(2, '0');
  }
  return result;
}
inp.onchange = e => {
  getHash(inp.files[0]).then(console.log);
};

&lt;input id="inp" type="file"&gt;

【讨论】：