feat(hashFile): 新增文件hash工具

src/components.d.ts

@@ -29,6 +29,7 @@ declare module 'vue' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElContainer: typeof import('element-plus/es')['ElContainer']

src/tools.json

@@ -47,6 +47,10 @@
         "name": "文本HASH",
         "link": "/hashText"
       },
+      {
+        "name": "文件HASH",
+        "link": "/hashFile"
+      },
       {
         "name": "在线JWT解密",
         "link": "/jwt"

src/views/hashFile/hashFile.service.ts

@@ -0,0 +1,13 @@
+import { MD5, SHA1, SHA256, SHA3, SHA512 } from 'crypto-js'
+
+export const algos = {
+  MD5,
+  SHA1,
+  SHA256,
+  SHA512,
+  SHA3
+} as const
+
+export type AlgoNames = keyof typeof algos;
+
+export const algoNames = Object.keys(algos) as AlgoNames[]

src/views/hashFile/hashFile.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import HashFileWorker from './hashFile.worker?worker'
+import type { AlgoNames } from './hashFile.service'
+import formatBytes from '@/utils/formatBytes'
+
+const { post, data, terminate } = useWebWorker<{
+  [K in AlgoNames]: string
+} | undefined>(new HashFileWorker())
+const { copy } = useCopy({ text: '复制成功' })
+
+let tmpFile: File | undefined
+const algoNames = ref<AlgoNames[]>([])
+const algos = ref<AlgoNames[]>(['MD5'])
+const fileInfo = ref('')
+const loading = computed(() => {
+  if (!fileInfo.value) {
+    return false
+  } else if (!data.value) {
+    return true
+  } else {
+    return Object.keys(data.value).length !== algos.value.length
+  }
+})
+
+onBeforeMount(async () => {
+  algoNames.value = (await import('./hashFile.service')).algoNames
+})
+
+onUnmounted(() => {
+  terminate()
+})
+
+function updateAlgos () {
+  tmpFile = undefined
+  data.value = undefined
+  fileInfo.value = ''
+  if (algos.value.length === 0) {
+    algos.value = ['MD5']
+  }
+}
+
+function calculate (rawFile: File) {
+  tmpFile = rawFile
+  fileInfo.value = `${rawFile.name} (类型: ${rawFile.type}, 大小: ${formatBytes(rawFile.size)})`
+  post({ value: tmpFile, algos: toRaw(algos.value) })
+  return false
+}
+</script>
+
+<template>
+  <div
+    w-full
+    h-full
+    overflow-auto
+    flex
+    flex-col
+    items-center
+  >
+    <div
+      w-250
+      max-w-full
+      flex
+      flex-col
+      gap-4
+    >
+      <el-alert
+        title="文件不会被上传"
+        type="info"
+        show-icon
+        center
+      />
+      <el-upload
+        class="upload-demo"
+        drag
+        multiple
+        :before-upload="calculate"
+        :disabled="loading"
+        :show-file-list="false"
+      >
+        <i class="i-icon-park-outline-upload-one el-icon--upload" />
+        <div class="el-upload__text">
+          将文件拖拽到此处 或 <em>点击选择文件</em>
+        </div>
+      </el-upload>
+      <el-checkbox-group
+        v-if="algoNames"
+        v-model="algos"
+        :disabled="loading"
+        @change="updateAlgos"
+      >
+        <el-checkbox
+          v-for="algo in algoNames"
+          :key="algo"
+          :label="algo"
+        />
+      </el-checkbox-group>
+      <div
+        v-if="fileInfo"
+      >
+        <el-input
+          v-model="fileInfo"
+          readonly
+        >
+          <template #prepend>
+            <span
+              w-32
+              select-none
+            >文件名称</span>
+          </template>
+          <template #append>
+            <el-button @click="copy(fileInfo)">
+              <i class="i-icon-park-outline-copy" />
+            </el-button>
+          </template>
+        </el-input>
+      </div>
+      <template v-if="algos && fileInfo">
+        <el-divider
+          mt-4
+          mb-4
+        />
+        <div
+          v-loading="loading"
+          flex
+          flex-col
+          gap-4
+        >
+          <el-input
+            v-for="algo in algos"
+            :key="algo"
+            :model-value="data?.[algo]"
+            readonly
+          >
+            <template #prepend>
+              <span
+                w-32
+                select-none
+              >{{ algo }}</span>
+            </template>
+            <template
+              v-if="data?.[algo]"
+              #append
+            >
+              <el-button @click="copy(data[algo])">
+                <i class="i-icon-park-outline-copy" />
+              </el-button>
+            </template>
+          </el-input>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>

src/views/hashFile/hashFile.worker.ts

@@ -0,0 +1,22 @@
+import { lib } from 'crypto-js'
+import { algos, type AlgoNames } from './hashFile.service'
+
+const hashFile = (algo: AlgoNames, value: lib.WordArray) => algos[algo](value).toString()
+
+self.addEventListener('message', function (event) {
+  if (event.data && event.data.value && event.data.value instanceof File) {
+    const algos = (event.data.algos || ['MD5']) as AlgoNames[]
+    const reader = new FileReader()
+    reader.readAsArrayBuffer(event.data.value)
+    reader.onload = function () {
+      const wordArray = lib.WordArray.create(reader.result as unknown as number[])
+      const result = {} as { [key in AlgoNames]: string }
+      for (const algo of algos) {
+        result[algo] = hashFile(algo, wordArray)
+        self.postMessage(result)
+      }
+    }
+  } else {
+    self.postMessage(null)
+  }
+})

src/views/hashText/hashText.vue

@@ -115,7 +115,3 @@ function calculate () {
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-
-</style>

src/views/idChinese/idChinese.vue

@@ -66,4 +66,3 @@ async function analyse () {
   }
 }
 </script>
-