From e761db334f05fffafc8a03a363ea8faf00eb069f Mon Sep 17 00:00:00 2001
From: huchao <huchao11@126.com>
Date: Thu, 30 Oct 2025 17:19:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0=E8=BF=9B?=
 =?UTF-8?q?=E5=BA=A6=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/infra/file/index.ts                |  4 ++--
 src/components/UploadFile/src/useUpload.ts | 16 ++++++++++++----
 src/views/infra/file/FileForm.vue          | 10 +++++++++-
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/api/infra/file/index.ts b/src/api/infra/file/index.ts
index 374f8c6ec..01009f2f0 100644
--- a/src/api/infra/file/index.ts
+++ b/src/api/infra/file/index.ts
@@ -41,6 +41,6 @@ export const createFile = (data: any) => {
 }
 
 // 上传文件
-export const updateFile = (data: any) => {
-  return request.upload({ url: '/infra/file/upload', data })
+export const updateFile = (data: any, onUploadProgress?: Function) => {
+  return request.upload({ url: '/infra/file/upload', data, onUploadProgress })
 }
diff --git a/src/components/UploadFile/src/useUpload.ts b/src/components/UploadFile/src/useUpload.ts
index 2e9a51a67..8f316eb59 100644
--- a/src/components/UploadFile/src/useUpload.ts
+++ b/src/components/UploadFile/src/useUpload.ts
@@ -1,6 +1,6 @@
 import * as FileApi from '@/api/infra/file'
-import { UploadRawFile, UploadRequestOptions } from 'element-plus/es/components/upload/src/upload'
-import axios from 'axios'
+import { UploadRawFile, UploadRequestOptions, UploadProgressEvent } from 'element-plus/es/components/upload/src/upload'
+import axios, { AxiosProgressEvent } from 'axios'
 
 /**
  * 获得上传 URL
@@ -16,6 +16,13 @@ export const useUpload = (directory?: string) => {
   const isClientUpload = UPLOAD_TYPE.CLIENT === import.meta.env.VITE_UPLOAD_TYPE
   // 重写ElUpload上传方法
   const httpRequest = async (options: UploadRequestOptions) => {
+    // 文件上传进度监听
+    const uploadProgressHandler = (evt: AxiosProgressEvent) => {
+      const upEvt: UploadProgressEvent = Object.assign(evt.event)
+      upEvt.percent = evt.progress ? (evt.progress * 100) : 0
+      options.onProgress(upEvt) // 触发 el-upload 的 on-progress
+    }
+
     // 模式一：前端上传
     if (isClientUpload) {
       // 1.1 生成文件名称
@@ -27,7 +34,8 @@ export const useUpload = (directory?: string) => {
         .put(presignedInfo.uploadUrl, options.file, {
           headers: {
             'Content-Type': options.file.type
-          }
+          },
+          onUploadProgress: uploadProgressHandler
         })
         .then(() => {
           // 1.4. 记录文件信息到后端（异步）
@@ -39,7 +47,7 @@ export const useUpload = (directory?: string) => {
       // 模式二：后端上传
       // 重写 el-upload httpRequest 文件上传成功会走成功的钩子，失败走失败的钩子
       return new Promise((resolve, reject) => {
-        FileApi.updateFile({ file: options.file, directory })
+        FileApi.updateFile({ file: options.file, directory }, uploadProgressHandler)
           .then((res) => {
             if (res.code === 0) {
               resolve(res)
diff --git a/src/views/infra/file/FileForm.vue b/src/views/infra/file/FileForm.vue
index 1de1e253f..84b2504ad 100644
--- a/src/views/infra/file/FileForm.vue
+++ b/src/views/infra/file/FileForm.vue
@@ -11,6 +11,7 @@
       :on-change="handleFileChange"
       :on-error="submitFormError"
       :on-exceed="handleExceed"
+      :on-progress="handleProgress"
       :on-success="submitFormSuccess"
       :http-request="httpRequest"
       accept=".jpg, .png, .gif"
@@ -32,6 +33,7 @@
 </template>
 <script lang="ts" setup>
 import { useUpload } from '@/components/UploadFile/src/useUpload'
+import { UploadFile, UploadProgressEvent } from 'element-plus/es/components/upload/src/upload'
 
 defineOptions({ name: 'InfraFileForm' })
 
@@ -54,16 +56,22 @@ const open = async () => {
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
 /** 处理上传的文件发生变化 */
-const handleFileChange = (file) => {
+const handleFileChange = (file: UploadFile) => {
   data.value.path = file.name
 }
 
+/** 处理文件上传进度显示 */
+const handleProgress = (upEvt: UploadProgressEvent, file: UploadFile) => {
+  file.percentage = upEvt.percent
+}
+
 /** 提交表单 */
 const submitFileForm = () => {
   if (fileList.value.length == 0) {
     message.error('请上传文件')
     return
   }
+  formLoading.value = true
   unref(uploadRef)?.submit()
 }
 
-- 
Gitee