perf: 增强文件上传过程，通过改进的参数处理和状态管理

src/components/ShowFile/ShowFile.vue

@@ -2329,17 +2329,11 @@ export default {
     },
     upload() {
       // 打开文件选择框
-      this.$store.dispatch('updateMessage', {
-        event: 'openUploader',
-        data: this.getUploadParams(),
-      })
+      this.$store.dispatch('updateMessage', {event: 'openUploader'})
     },
     uploadFolder() {
       if (window.uploader.supportDirectory) {
-        this.$store.dispatch('updateMessage', {
-          event: 'uploadFolder',
-          data: this.getUploadParams(),
-        })
+        this.$store.dispatch('updateMessage', {event: 'uploadFolder'})
       } else {
         this.$message({
           message: '该浏览器不支持上传文件夹',

src/components/SimpleUploader/globalUploader.vue

@@ -192,6 +192,7 @@ export default {
       successMsg: null,
       enableDragUpload: true,// 是否启用拖拽上传
       uploader: null,
+      resolveFilesAddedPromise: null, // 用于等待获取上传参数
     }
   },
   computed: {
@@ -218,19 +219,21 @@ export default {
           }
           break
         case 'openUploader':
-          this.params = msg.data || {}
           if (this.$refs.uploadBtn) {
             $('#global-uploader-btn').click()
           }
           break
         case 'uploadFolder':
-          this.params = msg.data || {}
           if (this.$refs.folderBtn) {
             $('#folder-uploader-btn').click()
           }
           break
         case 'onUploadParams':
           this.params = msg.data || {}
+          if (this.resolveFilesAddedPromise) {
+            this.resolveFilesAddedPromise();
+            this.resolveFilesAddedPromise = null;
+          }
           break
       }
     }
@@ -311,21 +314,33 @@ export default {
         });
       });
     },
-    onDragenter(e) {
-      this.$store.dispatch('updateMessage', {event: 'getUploadParams'})
+    onDragenter() {
     },
     isPath(str) {
       // 这个正则表达式检测路径中的斜杠字符
       return /[/\\]/.test(str);
     },
     async onFilesAdded(files) {
-      // 等待50ms
-      setTimeout(async () => await this.doFilesAdded(files), 50)
+      if (files.length === 0) {
+        return;
+      }
+      try {
+        const waitForParams = new Promise(resolve => {
+          this.resolveFilesAddedPromise = resolve;
+        });
+
+        await this.$store.dispatch('updateMessage', { event: 'getUploadParams' });
+
+        await waitForParams;
+
+        await this.doFilesAdded(files);
+
+      } catch (error) {
+        console.error("Failed to add files:", error);
+        this.uploaderCancel();
+      }
     },
     async doFilesAdded(files) {
-      if (files.length === 0) {
-        return
-      }
       let filenames = files.map(file => file.name)
       const paths = Object.keys(this.uploader.filePaths)
       paths.forEach(path => {
@@ -339,7 +354,6 @@ export default {
         filenames: filenames,
         ...this.params
       }
-      console.log('上传文件', query)
       const res = await api.checkExist(query)
       if (res.data.exist) {
         this.$confirm('文件已存在，是否覆盖？', '提示', {

src/views/home/mobile/index.vue

@@ -273,7 +273,7 @@
 </template>
 <script>
 
-import {mapGetters} from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import {formatSize, formatTime} from '@/utils/number'
 import {getElementToPageLeft, getElementToPageTop} from '@/utils/dom'
 import api from '@/api/file-api'
@@ -294,6 +294,7 @@ export default {
     ImageViewer, IconFile,
   },
   computed: {
+    ...mapState(['message']),
     ...mapGetters([
       'name',
       'avatar'
@@ -403,6 +404,18 @@ export default {
       }
     }
   },
+  watch: {
+    message(msg) {
+      switch (msg.event) {
+        case 'getUploadParams':
+          this.$store.dispatch('updateMessage', {
+            event: 'onUploadParams',
+            data: this.getUploadParams(),
+          })
+          break
+      }
+    }
+  },
   mounted() {
     // 加载布局
     if (this.$route.query.vmode) {
@@ -1255,24 +1268,21 @@ export default {
       // 上传文件
       if (action.name === '上传文件') {
         // 打开文件选择框
-        this.$store.dispatch('updateMessage', { event: 'openUploader', data: {
-            // 传入的参数
-            folder: this.$route.query.folder,
-            currentDirectory: encodeURI(this.path),
-            username: this.$store.state.user.name,
-            userId: this.$store.state.user.userId
-          }})
+        this.$store.dispatch('updateMessage', { event: 'openUploader'})
       }
       // 上传文件夹
       if (action.name === '上传文件夹') {
         // 打开文件夹选择框
-        this.$store.dispatch('updateMessage', { event: 'uploadFolder', data: {
-            // 传入的参数
-            folder: this.$route.query.folder,
-            currentDirectory: encodeURI(this.path),
-            username: this.$store.state.user.name,
-            userId: this.$store.state.user.userId
-          }})
+        this.$store.dispatch('updateMessage', { event: 'uploadFolder'})
+      }
+    },
+    getUploadParams() {
+      return {
+        // 传入的参数
+        folder: this.$route.query.folder,
+        currentDirectory: encodeURI(this.path),
+        username: this.$store.state.user.name,
+        userId: this.$store.state.user.userId
       }
     },
     // 新建文件夹