feat: implement async file hash calculation using web workers for improved performance

front/components/Home/File/FileUploadProgressView.vue

@@ -2,9 +2,10 @@
 import CircularProgress from '@/components/CircularProgress.vue'
 import { chunk, get, shuffle, times } from 'lodash-es'
 import { cx } from 'class-variance-authority'
-import calcFileHash from '@/lib/calcFileHash'
 import { filesize } from 'filesize'
 import { toast } from 'vue-sonner'
+import asyncWorker from '~/lib/asyncWorker'
+import calcFileHashWorker from '~/lib/calcFileHashWorker?worker'
 const props = defineProps<{
     data: { file: File; config: any; handle_type: string }
 }>()
@@ -34,7 +35,8 @@ const { error } = useAsyncState(async () => {
     if (!file) return
     const { size, type = 'application/octet-stream' } = file || {}
     const now = Date.now()
-    const hash = await calcFileHash({ file })
+    const res = await asyncWorker(calcFileHashWorker, { data: { file } })
+    const { hash } = res?.data || {}
     if (hash) {
         step.value = 'upload'
         calcHashTime.value = Date.now() - now

front/lib/asyncWorker.ts

@@ -0,0 +1,14 @@
+const asyncWorker = (w: new () => Worker, opts: { data: any }) => {
+    const { data } = opts || {}
+    return new Promise<MessageEvent>((resolve, reject) => {
+        const worker = new w()
+        worker.postMessage(data || {})
+        worker.onmessage = (e: MessageEvent) => {
+            resolve(e)
+        }
+        worker.onerror = (e: ErrorEvent) => {
+            reject(e)
+        }
+    })
+}
+export default asyncWorker

front/lib/calcFileHashWorker.ts

@@ -0,0 +1,8 @@
+import calcFileHash from './calcFileHash'
+
+// 监听主线程消息
+self.onmessage = async (e: MessageEvent<{ file: File }>) => {
+    const { file } = e.data || {}
+    const hash = await calcFileHash({ file })
+    self.postMessage({ hash })
+}