javascript - 使用 crypto.subtle.digest 生成给定文件的摘要是否可行？

Question

我已经运行了来自 MDN doc 的这个例子

const text = 'An obscure body in the S-K System, your majesty. The inhabitants refer to it as the planet Earth.';

async function digestMessage(message) {
  const msgUint8 = new TextEncoder().encode(message);                           // encode as (utf-8) Uint8Array
  const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);           // hash the message
  const hashArray = Array.from(new Uint8Array(hashBuffer));                     // convert buffer to byte array
  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
  return hashHex;
}

const digestHex = await digestMessage(text);
console.log(digestHex);

我了解示例中显示的基本用法。
但是，我不知道如何生成给定文件/blob 的摘要。我试过这个

const hashBuffer = crypto.subtle.digest('SHA-256', file);

点击 https://jsfiddle.net/5dn4bjfw/查看完整版。
并得到这个错误。

The provided value is not of type '(ArrayBuffer or ArrayBufferView)'

我该怎么办？

Answer 1

crypto.subtle.digest() requires一个 ArrayBuffer 或 ArrayBufferView。
File可以通过 file.arrayBuffer() 将其视为 ArrayBuffer .
上面例子中的函数应该是 async 如 MDN example并使用 await对于所有返回 Promise 的调用。

async function myFunction(){
  const finput = document.getElementById('fileinput');
  const file = finput.files[0];
  const arrayBuffer = await file.arrayBuffer();
  const hashBuffer = await crypto.subtle.digest('SHA-256', arrayBuffer); // hash the message
  console.log(hashBuffer);
  const hashArray = Array.from(new Uint8Array(hashBuffer)); // convert buffer to byte array
  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
  console.log(hashHex);
}