feat(oss): 添加测试上传功能

新增上传测试模态框组件，支持图片和文件上传测试
在OSS管理页面添加测试上传按钮
为上传API添加Content-Type头部配置
修复全屏引导hook的类型断言问题

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,
+      },
+    },
   );
 }
 

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,
     },
   ];
 

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>

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>