From ab829060f1a4a8c0adbe95a7f7741c831d2478ac Mon Sep 17 00:00:00 2001
From: theo <971366405@qq.com>
Date: Thu, 28 Aug 2025 11:59:15 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20:recycle:=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E4=BA=86=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0=EF=BC=8C=E8=A7=A3?=
 =?UTF-8?q?=E5=86=B3=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0=E4=B8=8D=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E8=BF=9B=E5=BA=A6=E6=9D=A1=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构了文件上传，解决文件上传不显示进度条的问题，现在多选文件上传时，每个文件有单独的进度条
---
 src/api/file-api.ts                  | 10 ++++-
 src/components/Upload/FileUpload.vue | 66 ++++++++++++----------------
 2 files changed, 35 insertions(+), 41 deletions(-)

diff --git a/src/api/file-api.ts b/src/api/file-api.ts
index 826698ef..b899c447 100644
--- a/src/api/file-api.ts
+++ b/src/api/file-api.ts
@@ -1,13 +1,19 @@
 import request from "@/utils/request";
 
 const FileAPI = {
-  /** 上传文件 */
-  upload(formData: FormData) {
+  /** 上传文件 （传入 FormData，上传进度回调） */
+  upload(formData: FormData, onProgress?: (percent: number) => void) {
     return request<any, FileInfo>({
       url: "/api/v1/files",
       method: "post",
       data: formData,
       headers: { "Content-Type": "multipart/form-data" },
+      onUploadProgress: (progressEvent) => {
+        if (progressEvent.total) {
+          const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+          onProgress?.(percent);
+        }
+      },
     });
   },
 
diff --git a/src/components/Upload/FileUpload.vue b/src/components/Upload/FileUpload.vue
index 6857acec..baa88a67 100644
--- a/src/components/Upload/FileUpload.vue
+++ b/src/components/Upload/FileUpload.vue
@@ -6,7 +6,6 @@
       :style="props.style"
       :before-upload="handleBeforeUpload"
       :http-request="handleUpload"
-      :on-progress="handleProgress"
       :on-success="handleSuccess"
       :on-error="handleError"
       :accept="props.accept"
@@ -20,25 +19,24 @@
 
       <!-- 文件列表 -->
       <template #file="{ file }">
-        <div class="el-upload-list__item-info">
-          <a class="el-upload-list__item-name" @click="handleDownload(file)">
-            <el-icon><Document /></el-icon>
-            <span class="el-upload-list__item-file-name">{{ file.name }}</span>
-            <span class="el-icon--close" @click.stop="handleRemove(file.url!)">
-              <el-icon><Close /></el-icon>
-            </span>
-          </a>
-        </div>
+        <template v-if="file.status === 'success'">
+          <div class="el-upload-list__item-info">
+            <a class="el-upload-list__item-name" @click="handleDownload(file)">
+              <el-icon><Document /></el-icon>
+              <span class="el-upload-list__item-file-name">{{ file.name }}</span>
+              <span class="el-icon--close" @click.stop="handleRemove(file.url!)">
+                <el-icon><Close /></el-icon>
+              </span>
+            </a>
+          </div>
+        </template>
+        <template v-else>
+          <div class="el-upload-list__item-info">
+            <el-progress style="display: inline-flex" :percentage="file.percentage" />
+          </div>
+        </template>
       </template>
     </el-upload>
-
-    <el-progress
-      :style="{
-        display: showProgress ? 'inline-flex' : 'none',
-        width: '100%',
-      }"
-      :percentage="progressPercent"
-    />
   </div>
 </template>
 <script lang="ts" setup>
@@ -47,7 +45,6 @@ import {
   UploadUserFile,
   UploadFile,
   UploadFiles,
-  UploadProgressEvent,
   UploadRequestOptions,
 } from "element-plus";
 
@@ -111,7 +108,6 @@ const props = defineProps({
     },
   },
 });
-
 const modelValue = defineModel("modelValue", {
   type: [Array] as PropType<FileInfo[]>,
   required: true,
@@ -120,9 +116,6 @@ const modelValue = defineModel("modelValue", {
 
 const fileList = ref([] as UploadFile[]);
 
-const showProgress = ref(false);
-const progressPercent = ref(0);
-
 // 监听 modelValue 转换用于显示的 fileList
 watch(
   modelValue,
@@ -160,7 +153,6 @@ function handleBeforeUpload(file: UploadRawFile) {
 function handleUpload(options: UploadRequestOptions) {
   return new Promise((resolve, reject) => {
     const file = options.file;
-
     const formData = new FormData();
     formData.append(props.name, file);
 
@@ -168,26 +160,22 @@ function handleUpload(options: UploadRequestOptions) {
     Object.keys(props.data).forEach((key) => {
       formData.append(key, props.data[key]);
     });
-
-    FileAPI.upload(formData)
-      .then((data) => {
-        resolve(data);
+    FileAPI.upload(formData, (percent) => {
+      const uid = file.uid;
+      const fileItem = fileList.value.find((file) => file.uid === uid);
+      if (fileItem) {
+        fileItem.percentage = percent;
+      }
+    })
+      .then((res) => {
+        resolve(res);
       })
-      .catch((error) => {
-        reject(error);
+      .catch((err) => {
+        reject(err);
       });
   });
 }
 
-/**
- * 上传进度
- *
- * @param event
- */
-const handleProgress = (event: UploadProgressEvent) => {
-  progressPercent.value = event.percent;
-};
-
 /**
  * 上传成功
  */