From d0960f6ad6736f842a91cf9d404dbc44f7bd3daa Mon Sep 17 00:00:00 2001
From: dj <1042039504@qq.com>
Date: Wed, 11 Jun 2025 22:48:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(FileUpload):=20=E5=AE=9E=E7=8E=B0=E5=A4=9A?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E6=89=B9=E9=87=8F=E4=B8=8A=E4=BC=A0=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加自定义上传逻辑，支持多文件上传- 优化文件选择和上传流程，实现自动上传
-增加上传进度提示和完成通知
- 修复了一些与上传相关的小问题
---
 src/components/FileUpload.vue | 95 +++++++++++++++++++++++++++++------
 1 file changed, 81 insertions(+), 14 deletions(-)

diff --git a/src/components/FileUpload.vue b/src/components/FileUpload.vue
index 3bb2218..fa95fc4 100644
--- a/src/components/FileUpload.vue
+++ b/src/components/FileUpload.vue
@@ -1,13 +1,14 @@
 <template>
-  <el-upload :file-list="_value"
-             :action="uploadFileUrl"
+  <el-upload :file-list="_value" ref="uploadRef"
+             action="#"
              :headers="headers"
              :limit="maxSize"
              with-credentials
              :multiple="multiple"
-             :data="uploadParams"
+             :data="uploadParams" :on-change="handleChange"
+             :http-request="customUpload"
              :show-file-list="showFileList"
-             :auto-upload="true"
+             :auto-upload="false"
              :before-upload="beforeUpload"
              :on-success="handleUploadSuccess"
              :on-error="uploadError"
@@ -19,17 +20,20 @@
 </template>
 
 <script setup>
-import {ElLoading, ElMessageBox, ElNotification} from "element-plus";
+import {ElLoading, ElMessage, ElMessageBox, ElNotification} from "element-plus";
 import {getToken} from '@/utils/auth'
 import {nextTick} from "vue";
+import axios from "axios";
 
 const baseURL = import.meta.env.VITE_BASE_URL
 const uploadFileUrl = ref(baseURL + "/workflow/process/file/upload")
 const headers = reactive({
+  'Content-Type': 'multipart/form-data',
   authorization: getToken()
 })
 const loading = ref(false)
 const showTable = ref(false)
+const uploadIndex = ref(0)
 const uploadParams = ref({})
 const props = defineProps({
   value: {
@@ -55,7 +59,8 @@ const props = defineProps({
     default: true
   }
 })
-
+const uploadRef = ref(null); // el-upload 的 ref
+const uploadPromises = ref([]); // 跟踪每个文件的上传状态
 const emit = defineEmits(["input", "beforeUpload","getFile", "delete"])
 const fileList = ref([])
 const _value = computed({
@@ -75,15 +80,81 @@ const beforeRemove = (file) => {
 }
 
 const uploadLoading = ref(false)
+const uploadFile = ref([])
 const handleRemove = (file) => {
   emit("delete", file.response.data.id)
 }
-const beforeUpload = () => {
-  console.log("🚀 ~ file:'beforeUpload ")
 
-  uploadLoading.value= ElLoading.service({fullscreen: true})
+// 文件选择变化时触发
+const handleChange = (file, files) => {
+  console.log(file, files,'files')
+  uploadIndex.value++
+  uploadFile.value.push(file)
+};
+watch(() => uploadIndex.value, (newVal) => {
+  console.log('newVal',newVal)
+  startUpload(uploadFile.value); // 自动触发上传
+},{
+  deep: true
+})
+// 自定义上传逻辑
+const customUpload = async (options) => {
+  const formData = new FormData();
+  formData.append('file', options.raw);
+  try {
+    const response = await axios.post(uploadFileUrl.value, formData, {
+      headers: headers,
+    });
+
+    fileList.value.push(response.data.data)
+
+    emit("getFile", response.data.data)
+    return response.data; // 成功时返回响应
+  } catch (error) {
+    throw new Error('上传失败'); // 失败时抛出错误
+  }
+};
+
+// 触发所有文件上传
+const startUpload = (files) => {
+  uploadLoading.value= ElLoading.service({
+    fullscreen: true,
+    text: '文件上传中...',
+  })
+  if (files.length === 0) {
+    return; // 没有文件时直接返回
+  }
+  uploadPromises.value = []; // 重置 Promise 数组
+  files.forEach((file) => {
+    // 触发每个文件的上传
+    const promise = new Promise((resolve, reject) => {
+      customUpload(file).then(resolve)
+          .catch(reject);
+    });
+    uploadPromises.value.push(promise);
+  });
+
+  // 使用 Promise.all 监听所有文件上传完成
+  Promise.all(uploadPromises.value)
+      .then(() => {
+        ElMessage.success('所有文件上传完成！');
+        ElNotification({
+          title: '提示',
+          message: '文件上传成功',
+          type: 'success'
+        })
+        files = []; // 清空文件列表
+        uploadRef.value.clearFiles(); // 清空上传组件
+        nextTick(() => {
+          uploadLoading.value.close()
+          uploadLoading.value=null
+        })
+      })
+
+};
+
+const beforeUpload = () => {
   loading.value = true
-  // emit("beforeUpload")
   return true
 }
 const handleUploadSuccess = (res) => {
@@ -97,10 +168,6 @@ const handleUploadSuccess = (res) => {
   let data = res.data
   fileList.value.push(data)
   emit("getFile", res.data)
-  nextTick(() => {
-    uploadLoading.value.close()
-    uploadLoading.value=null
-  })
 }
 const uploadError = () => {
   loading.value = false