feat: 处理并发上传

src/components/FileUpload/index.vue

@@ -107,6 +107,11 @@ export default {
     headers: {
       type: Object,
       default: () => ({})
+    },
+    // 最大并发上传数量
+    maxConcurrentUploads: {
+      type: Number,
+      default: 5
     }
   },
 
@@ -116,6 +121,8 @@ export default {
       uploadQueue: [],
       successFiles: [], // 存储上传成功的文件信息
       isProcessing: false, // 是否有上传中的文件
+      maxConcurrent: this.maxConcurrentUploads, // 最大并发上传数量
+      activeUploads: 0, // 当前活跃的上传数量
     }
   },
 
@@ -126,6 +133,7 @@ export default {
       this.fileList = []
       this.uploadQueue = []
       this.successFiles = []
+      this.activeUploads = 0
     },
 
     // 处理文件变化
@@ -223,16 +231,25 @@ export default {
     },
 
     async processUploadQueue() {
-      while (this.uploadQueue.length > 0) {
-        if (this.isProcessing) return
-        this.isProcessing = true
-        await this.processSingleFile(this.uploadQueue[0])
-        this.uploadQueue.shift()
-        this.isProcessing = false
+      // 并发处理上传队列
+      while (this.uploadQueue.length > 0 && this.activeUploads < this.maxConcurrent) {
+        const file = this.uploadQueue.shift()
+        this.activeUploads++
+        this.processSingleFile(file).finally(() => {
+          this.activeUploads--
+          // 继续处理队列中的其他文件
+          if (this.uploadQueue.length > 0 && this.activeUploads < this.maxConcurrent) {
+            this.processUploadQueue()
+          }
+          // 检查是否所有文件都已完成
+          this.checkUploadComplete()
+        })
       }
+    },
 
-      // 所有文件上传完成后触发事件
-      if (this.uploadQueue.length === 0) {
+    // 检查上传是否完成
+    checkUploadComplete() {
+      if (this.uploadQueue.length === 0 && this.activeUploads === 0) {
         this.$emit('upload-complete', this.successFiles)
       }
     },
@@ -339,6 +356,8 @@ export default {
           file.cancelToken.cancel('批量取消上传')
         }
       })
+      this.activeUploads = 0
+      this.uploadQueue = []
     },
     percentFormat(percent){
       return percent == 0 ? '等待中': `${percent}%`

src/views/createMaterial/MaterialUpload.vue

@@ -16,6 +16,7 @@
           :upload-url="uploadUrl"
           :extra-data="extraData"
           :headers="headers"
+          :max-concurrent-uploads="10"
           @update:files="handleFilesUpdate"
           @upload-success="handleUploadSuccess"
           @upload-error="handleUploadError"