From 29245db42f8d0af6b6b789834028233c1444a601 Mon Sep 17 00:00:00 2001
From: wangchengming <15110151257@163.com>
Date: Thu, 9 Oct 2025 15:00:53 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AA=92=E4=BD=93=E4=BE=9B?=
 =?UTF-8?q?=E5=BA=94=E5=95=86=E6=96=87=E4=BB=B6=E6=94=AF=E6=8C=81=E5=A4=9A?=
 =?UTF-8?q?=E9=80=89=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/common.js                             |  13 ++
 src/components/FileUpload/multiFileUpload.vue | 169 ++++++++++--------
 2 files changed, 107 insertions(+), 75 deletions(-)

diff --git a/src/api/common.js b/src/api/common.js
index 73ebb1e..2341613 100644
--- a/src/api/common.js
+++ b/src/api/common.js
@@ -13,6 +13,19 @@ export function uploadFile(data) {
   })
 } 
 
+// 上传文件 多个
+export function uploadFiles(data) {
+  return request({
+    url: '/common/uploadBatch',
+    method: 'post',
+    data: data,
+    timeout: 600000, // 300秒 = 5分钟，根据文件大小调整
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+} 
+
 // 公用下载文件接口
 export function downFile(fileUrl) {
   return request({
diff --git a/src/components/FileUpload/multiFileUpload.vue b/src/components/FileUpload/multiFileUpload.vue
index 6f0dccd..eb7b306 100644
--- a/src/components/FileUpload/multiFileUpload.vue
+++ b/src/components/FileUpload/multiFileUpload.vue
@@ -31,8 +31,8 @@
                 </div>
             </div>
             <el-upload action="#" class="noFileCard" :http-request="requestUpload" list-type="picture-card"
-                :file-list="cardfileList" :on-change="handleChange" :show-file-list="false" :accept="_accept"
-                :before-upload="beforeUpload">
+                :auto-upload="false" :file-list="cardfileList" :on-change="handleChange" :show-file-list="false"
+                :accept="_accept" multiple :limit="10" :before-upload="beforeUpload">
                 <el-icon class="avatar-uploader-icon">
                     <Plus />
                 </el-icon>
@@ -53,7 +53,7 @@
 <script setup>
 import { defineExpose, ref } from 'vue'
 import { Plus, Delete } from '@element-plus/icons-vue'
-import { uploadFile } from "@/api/common"
+import { uploadFiles } from "@/api/common"
 import iconDoc from '@/assets/images/iconDoc.png'
 import iconOther from '@/assets/images/iconOther.png'
 import iconPdf from '@/assets/images/iconPdf.png'
@@ -70,7 +70,11 @@ const emit = defineEmits(['setFormFile'])
 
 // 文件列表初始化
 const fileList = ref([])
+// 上传组件中的file列表
 const cardfileList = ref([])
+// 存储选中的文件
+const selectedFiles = ref([])
+const isUploading = ref(false) // 上传状态
 // 文件类型 1-营业执照 2-媒体权属 9-其它附件
 // 批文文件-1,独家授权文件-2,媒体行业授权文件-3,媒体归属附件-4,曾经媒体照片-5,图片上传-6,视频上传-7,盖章刊例-8, 资质文件-9, 媒体链条-10, 刊例照片-11,MR和制作要求-12
 const _fileType = ref('1')
@@ -81,18 +85,6 @@ const dialogVisible = ref(false)
 const suffix = ref('')
 
 const setFileInfo = (files) => {
-    // 处理无后缀名情况
-    // if (!filePath || filePath.indexOf('.') === -1) {
-    //     fileList.value = []
-    //     return '';
-    // }
-
-    // var suffix = filePath.split('.').pop();
-    // fileList.value = [{
-    //     name: filePath,
-    //     url: baseUrl + filePath,
-    //     suffix: suffix
-    // }]
     fileList.value = files
 }
 
@@ -121,83 +113,110 @@ const handleRemoveImage = (itemFile) => {
     }
 }
 
-// 自定义上传
+// 自定义上传 - 空实现，实际在 handleChange 中处理
 const requestUpload = async (options) => {
-    const { file } = options
-    const formData = new FormData()
-    formData.append('file', file)
-
-    try {
-        proxy.$modal.loading('正在上传文件，请耐心等待...')
-        const res = await uploadFile(formData)
-        if (res.code === 200) {
-            fileList.value.push({
-                id: undefined,
-                busSupplierId: undefined,
-                fileType: _fileType,
-                fileUrl: baseUrl + res.fileName,
-                fileName: res.fileName,
-                originalFileName: res.originalFilename,
-                size: res.size,
-                suffix: res.suffix
-            })
-            cardfileList.value = [{
-                id: undefined,
-                busSupplierId: undefined,
-                fileType: _fileType,
-                fileUrl: baseUrl + res.fileName,
-                fileName: res.fileName,
-                originalFileName: res.originalFilename,
-                size: res.size,
-                suffix: res.suffix
-            }]
-            proxy.$modal.closeLoading()
-            emit('setFormFile', _fileType.value, fileList.value)
-        }
-    } catch (error) {
-        proxy.$modal.closeLoading()
-        proxy.$modal.msgError("上传失败")
-        console.error('上传失败:', error)
-    }
+    // 这个方法现在不做实际工作，批量上传在 handleChange 中处理
+    return false
 }
 
 // 文件类型校验
 const beforeUpload = (file) => {
     if (_accept.value == '*/*') return true
-    // const validTypes = [
-    //     // 图片类型
-    //     "image/jpeg",
-    //     "image/jpg",
-    //     "image/png",
-    //     // PDF 类型
-    //     "application/pdf",
-    //     "application/x-pdf",
-    //     "application/acrobat",
-    //     "applications/vnd.pdf",
-    //     "text/pdf",
-    //     "text/x-pdf"]
     const isValidType = validTypes.includes(file.type)
-    // // const isLt5M = file.size / 1024 / 1024 < 5
 
     if (!isValidType) {
         proxy.$modal.msgError("文件格式错误，请上传 " + _accept.value + " 后缀的文件。");
         return false
     }
 
-    // if (!isLt5M) {
-    //     proxy.$modal.msgError("文件大小不能超过5MB");
-    //     return false
-    // }
-
     return true
 }
 
-// 文件变化处理
-const handleChange = (file, files) => {
-    // 可以在这里添加文件变化时的额外处理逻辑
-    // 不需要清空 fileList，因为上传逻辑会处理
-    cardfileList.value = []
+// 文件变化处理 - 改造为自动批量上传
+const handleChange = async (file, files) => {
+    // 更新选中的文件列表
+    selectedFiles.value = files.map(item => item.raw || item)
+    console.log('选择的文件', selectedFiles.value)
+    // 使用 nextTick 确保文件选择完成后再上传
+    await nextTick()
+
+    // 自动触发批量上传
+    if (selectedFiles.value.length > 0 && !isUploading.value) {
+        await handleBatchUpload()
+    }
 }
+// 批量上传方法
+const handleBatchUpload = async () => {
+    if (selectedFiles.value.length === 0 || isUploading.value) {
+        return
+    }
+
+    isUploading.value = true
+    proxy.$modal.loading(`正在上传 ${selectedFiles.value.length} 个文件，请耐心等待...`)
+
+    try {
+        const formData = new FormData()
+
+        // 添加所有文件到 FormData
+        selectedFiles.value.forEach((file, index) => {
+            formData.append('files', file)
+        })
+
+        console.log('提交参数', formData)
+
+        const res = await uploadFiles(formData)
+
+        if (res.code === 200) {
+            // 处理返回的文件数据
+            if (res.data && Array.isArray(res.data)) {
+                // 假设后端返回的是文件数组
+                res.data.forEach(fileInfo => {
+                    fileList.value.push({
+                        id: undefined,
+                        busSupplierId: undefined,
+                        fileType: _fileType.value,
+                        fileUrl: baseUrl + fileInfo.fileName,
+                        fileName: fileInfo.fileName,
+                        originalFileName: fileInfo.originalFilename,
+                        size: fileInfo.size,
+                        suffix: fileInfo.suffix
+                    })
+                    cardfileList.value = [{
+                        id: undefined,
+                        busSupplierId: undefined,
+                        fileType: _fileType,
+                        fileUrl: baseUrl + fileInfo.fileName,
+                        fileName: fileInfo.fileName,
+                        originalFileName: fileInfo.originalFilename,
+                        size: fileInfo.size,
+                        suffix: fileInfo.suffix
+                    }] 
+                })
+            }
+            proxy.$modal.closeLoading()
+            proxy.$modal.msgSuccess(`成功上传 ${selectedFiles.value.length} 个文件`)
+
+            // 清空已选文件和 cardfileList
+            selectedFiles.value = []
+            cardfileList.value = []
+
+            emit('setFormFile', _fileType.value, fileList.value)
+        } else {
+            proxy.$modal.msgError(res.message || '上传失败')
+        }
+    } catch (error) {
+        proxy.$modal.closeLoading()
+        proxy.$modal.msgError("上传失败: " + (error.message || '未知错误'))
+        console.error('批量上传失败:', error)
+
+        // 上传失败时清空选中的文件
+        selectedFiles.value = []
+        cardfileList.value = []
+    } finally {
+        isUploading.value = false
+    }
+}
+
 // 暴露方法给父组件
 defineExpose({
     setFileInfo,