From 7b7497581982c15ae49c786e0bae85851e3223d8 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Tue, 20 Jan 2026 11:29:56 +0800
Subject: [PATCH] =?UTF-8?q?feat(oss):=20=E6=B7=BB=E5=8A=A0=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95=E4=B8=8A=E4=BC=A0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增上传测试模态框组件，支持图片和文件上传测试
在OSS管理页面添加测试上传按钮
为上传API添加Content-Type头部配置
修复全屏引导hook的类型断言问题
---
 apps/web-antd/src/api/core/upload.ts          |  8 ++-
 .../web-antd/src/components/tree/src/hook.tsx |  2 +-
 apps/web-antd/src/views/system/oss/index.vue  | 11 ++++
 .../views/system/oss/upload-test-modal.vue    | 52 +++++++++++++++++++
 4 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 apps/web-antd/src/views/system/oss/upload-test-modal.vue

diff --git a/apps/web-antd/src/api/core/upload.ts b/apps/web-antd/src/api/core/upload.ts
index 331fa68d..41d1d77e 100644
--- a/apps/web-antd/src/api/core/upload.ts
+++ b/apps/web-antd/src/api/core/upload.ts
@@ -1,6 +1,7 @@
 import type { AxiosRequestConfig } from '@vben/request';
 
 import { alovaInstance } from '#/utils/http';
+import { ContentTypeEnum } from '#/utils/http/helper';
 
 /**
  * Axios上传进度事件
@@ -33,7 +34,12 @@ export function uploadApi(
   return alovaInstance.post<UploadResult>(
     '/resource/oss/upload',
     { file, ...otherData },
-    { timeout: 60_000 },
+    {
+      timeout: 60_000,
+      headers: {
+        'Content-Type': ContentTypeEnum.FORM_DATA,
+      },
+    },
   );
 }
 
diff --git a/apps/web-antd/src/components/tree/src/hook.tsx b/apps/web-antd/src/components/tree/src/hook.tsx
index 95098dc3..0b0f5f18 100644
--- a/apps/web-antd/src/components/tree/src/hook.tsx
+++ b/apps/web-antd/src/components/tree/src/hook.tsx
@@ -35,7 +35,7 @@ export function useFullScreenGuide() {
       target: () =>
         document.querySelector(
           'div#menu-select-table .vxe-tools--operate > button[title="全屏"]',
-        )!,
+        )! as HTMLElement,
     },
   ];
 
diff --git a/apps/web-antd/src/views/system/oss/index.vue b/apps/web-antd/src/views/system/oss/index.vue
index c9af6589..8b27fc09 100644
--- a/apps/web-antd/src/views/system/oss/index.vue
+++ b/apps/web-antd/src/views/system/oss/index.vue
@@ -30,6 +30,7 @@ import { columns, querySchema } from './data';
 import fallbackImageBase64 from './fallback-image.txt?raw';
 import fileUploadModal from './file-upload-modal.vue';
 import imageUploadModal from './image-upload-modal.vue';
+import uploadTestModal from './upload-test-modal.vue';
 
 const formOptions: VbenFormProps = {
   commonConfig: {
@@ -213,6 +214,9 @@ const [ImageUploadModal, imageUploadApi] = useVbenModal({
 const [FileUploadModal, fileUploadApi] = useVbenModal({
   connectedComponent: fileUploadModal,
 });
+const [UploadTestModal, uploadTestApi] = useVbenModal({
+  connectedComponent: uploadTestModal,
+});
 </script>
 
 <template>
@@ -250,6 +254,12 @@ const [FileUploadModal, fileUploadApi] = useVbenModal({
           >
             图片上传
           </a-button>
+          <a-button
+            v-access:code="['system:oss:upload']"
+            @click="uploadTestApi.open"
+          >
+            测试上传
+          </a-button>
         </Space>
       </template>
       <template #url="{ row }">
@@ -303,5 +313,6 @@ const [FileUploadModal, fileUploadApi] = useVbenModal({
     </BasicTable>
     <ImageUploadModal @reload="tableApi.query" />
     <FileUploadModal @reload="tableApi.query" />
+    <UploadTestModal />
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/system/oss/upload-test-modal.vue b/apps/web-antd/src/views/system/oss/upload-test-modal.vue
new file mode 100644
index 00000000..80c9e3f0
--- /dev/null
+++ b/apps/web-antd/src/views/system/oss/upload-test-modal.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+
+const [Modal, modalApi] = useVbenModal({
+  title: '测试上传',
+  onConfirm: handleConfirm,
+});
+
+const [Form, formApi] = useVbenForm({
+  showDefaultActions: false,
+  layout: 'vertical',
+  schema: [
+    {
+      fieldName: 'images',
+      component: 'ImageUpload',
+      label: '图片上传',
+      componentProps: {
+        maxCount: 3,
+      },
+    },
+    {
+      fieldName: 'files',
+      component: 'FileUpload',
+      label: '文件上传',
+    },
+  ],
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = await formApi.getValues();
+    console.log(data);
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+</script>
+
+<template>
+  <Modal>
+    <Form />
+  </Modal>
+</template>