feat: 大文件上传

eslint.config.js

@@ -24,7 +24,7 @@ export default antfu(
       'regexp/no-unused-capturing-group': 'off', // 禁止在正则表达式中使用未使用的捕获组
       'no-unused-vars': 'off',
       'array-callback-return': 'off',
-      'curly': ['error', 'all'],
+      'curly': 'off',
       'antfu/consistent-list-newline': 'off',
       'no-irregular-whitespace': 'off', // 禁止不规则的空白
       'no-console': 'off', // 是否允许在代码中使用 console

src/layouts/modules/Logo/index.vue

@@ -1,15 +1,16 @@
 <template>
   <RouterLink :to="to" class="h-[var(--g-sidebar-logo-height)] w-inherit flex-center gap-2 px-3 text-inherit no-underline" :class="{ 'cursor-pointer': settingsStore.settings.home.enable }" :title="title">
-    <div class="h-30px w-30px text-0">
-      <img v-if="showLogo" :src="logo" class="logo h-30px w-30px rounded-[4px] object-contain">
+    <div class="h-30px w-30px text-32px">
+      <!-- <img v-if="showLogo" :src="logo" class="logo h-30px w-30px rounded-[4px] object-contain"> -->
+      <svg-icon class="logo object-contain" :color="thenColor" name="logo" />
     </div>
     <span v-if="showTitle" class="ml-15px block truncate font-bold">{{ title }}</span>
   </RouterLink>
 </template>
 
 <script setup lang="ts">
 import useSettingsStore from '@/store/modules/settings'
-import imgLogo from '@/assets/images/logo.png'
+// import imgLogo from '@/assets/images/logo.png'
 
 defineOptions({
   name: 'Logo',
@@ -29,7 +30,8 @@ withDefaults(
 const settingsStore = useSettingsStore()
 
 const title = ref(import.meta.env.VITE_APP_TITLE)
-const logo = ref(imgLogo)
+// const logo = ref(imgLogo)
 
 const to = computed(() => settingsStore.settings.home.enable ? settingsStore.settings.home.fullPath : '')
+const thenColor = computed(() => settingsStore.settings.app.themeColor)
 </script>

src/router/modules/normal.ts

@@ -32,7 +32,7 @@ const routes: Array<RouteRecordRaw> = [{
   meta: {
     // title: () => useSettingsStore().settings.home.title,
     title: '组件',
-    icon: 'ant-design:code-sandbox-outlined',
+    icon: 'ant-design:export',
   },
   children: [
     {
@@ -43,17 +43,28 @@ const routes: Array<RouteRecordRaw> = [{
         title: '文件上传',
       },
     },
+  ],
+}, {
+  path: '/demo',
+  component: Layout,
+  name: 'Demo',
+  meta: {
+    // title: () => useSettingsStore().settings.home.title,
+    title: '示例功能',
+    icon: 'ant-design:code-sandbox-outlined',
+  },
+  children: [
     {
-      path: 'webworker',
-      component: () => import('@/views/base_comp/file_upload/webworker.vue'),
-      name: 'webWorker',
+      path: 'large_file',
+      component: () => import('@/views/demo/large_file/index.vue'),
+      name: 'LargeFile',
       meta: {
         title: '大文件上传',
       },
     },
     {
       path: 'base_table',
-      component: () => import('@/views/base_comp/base_table/index.vue'),
+      component: () => import('@/views/demo/base_table/index.vue'),
       name: 'BaseTable',
       meta: {
         title: '通用列表',

src/views/base_comp/file_upload/file_utils/cutFile.ts → src/views/demo/large_file/file_utils/cutFile.ts

@@ -11,9 +11,7 @@ export async function cutFile(file: File, chunkSize: number = CHUNK_SIZE) {
       const WORK_CHUNK_COUNT = Math.ceil(chunkCount / WORK_COUNT)
       let finishCount = 0
       for (let i = 0; i < WORK_COUNT; i++) {
-        const worker = new Worker(new URL('./webworker.js', import.meta.url), {
-          type: 'module',
-        })
+        const worker = new Worker(new URL('@/views/demo/large_file/file_utils/webworker.js', import.meta.url))
         const startIndex = i * WORK_CHUNK_COUNT
         let endIndex = startIndex + WORK_CHUNK_COUNT
         if (endIndex > chunkCount) {

src/views/demo/large_file/file_utils/webworker.js

@@ -0,0 +1,45 @@
+// import { creatChunk } from './createChunk.js'
+self.importScripts('spark-md5.js');
+
+function createChunk(file, index, chunkSize) {
+  try {
+    return new Promise((resolve, reject) => {
+      let start = index * chunkSize
+      let end = start + chunkSize
+      const spark = new SparkMD5.ArrayBuffer()
+      const fileReader = new FileReader()
+      fileReader.onload = (e) => {
+        spark.append(e.target.result)
+        resolve({
+          start,
+          end,
+          index,
+          hash: spark.end(),
+        })
+      }
+      fileReader.readAsArrayBuffer(file.slice(start, end))
+      fileReader.onerror = (err) => {
+        reject(err) // 如果读取错误，则拒绝Promise
+      }
+    })
+  } catch (error) {
+    console.log(error);
+
+  }
+}
+
+self.onmessage = async (e) => {
+  try {
+    const promises = []
+    const { file, chunkSize, startIndex, endIndex } = e.data
+    for (let i = startIndex; i < endIndex; i++) {
+      const chunk = createChunk(file, i, chunkSize)
+      promises.push(chunk)
+    }
+    const chunks = await Promise.all(promises)
+    self.postMessage(chunks)
+  } catch (error) {
+    self.postMessage(error)
+  }
+
+}

src/views/demo/large_file/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="bg-#fff p-36px">
+    <input type="file" name="" @change="handleFileChange">
+    <hr>
+    <el-button @click="handleUpload">
+      点击上传
+    </el-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { cutFile } from './file_utils/cutFile'
+
+const uploadFile = ref<File | null>(null)
+const handleFileChange = (e) => {
+  const file = e.target.files[0]
+  uploadFile.value = file
+}
+
+const handleUpload = async () => {
+  if (!uploadFile.value)
+    return
+  console.log(Date.now())
+  const result = await cutFile(uploadFile.value)
+  console.log(Date.now())
+  console.log(result)
+}
+</script>