@zyss/file-md5

计算文件MD5，优先使用wasm，不支持wasm会降级成js

import './App.css';
import { fileMd5 } from '@zyss/file-md5';
const App = () => {
  return (
    <div className="content">
      <input
        type="file"
        onChange={(e) => {
          const file = e.target!.files![0];
          console.time('md5');
          fileMd5(file).then((result) => {
            console.log(result);
            console.timeEnd('md5');
          });
        }}
      />
    </div>
  );
};

export default App;

使用worker

// md5.worker.ts
import { fileMd5 } from '@zyss/file-md5';

self.addEventListener('message', async (event: MessageEvent<File>) => {
  const file = event.data;
  if (!file) {
    return;
  }
  try {
    const result = await fileMd5(file);
    self.postMessage({ type: 'md5Result', payload: result });
  } catch (error) {
    self.postMessage({ type: 'md5Error', payload: error });
  }
});

// App.tsx
import './App.css';
const App = () => {
  return (
    <div className="content">
      <input
        type="file"
        onChange={(e) => {
          const file = e.target!.files![0];
          const worker = new Worker(new URL('./md5.worker.ts', import.meta.url));
          worker.onmessage = (e) => {
            console.log("Received message", e.data)
          }
          worker.postMessage(file)
        }}
      />
      <button
        onClick={() => {
          console.log('测试 worker');
        }}
      >
        b
      </button>
    </div>
  );
};

export default App;