From 3655cae900f587dcdb38a6108dd1534bb684554e Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Sat, 29 Mar 2025 22:13:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=87=AA=E5=AE=9A=E4=B9=89accept?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/upload/src/file-upload.vue |  4 +--
 .../src/components/upload/src/hook.ts         | 15 +++++++--
 .../components/upload/src/image-upload.vue    |  4 +--
 .../src/components/upload/src/props.d.ts      |  5 +++
 .../views/演示使用自行删除/upload/index.vue   | 31 +++++++++++++++----
 5 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/apps/web-antd/src/components/upload/src/file-upload.vue b/apps/web-antd/src/components/upload/src/file-upload.vue
index 966eeca1..6b768789 100644
--- a/apps/web-antd/src/components/upload/src/file-upload.vue
+++ b/apps/web-antd/src/components/upload/src/file-upload.vue
@@ -56,7 +56,7 @@ const ossIdList = defineModel<string | string[]>('value', {
 
 const {
   customRequest,
-  acceptFormat,
+  acceptStr,
   handleChange,
   handleRemove,
   beforeUpload,
@@ -117,7 +117,7 @@ const {
             class="text-primary mx-1 font-medium"
             :class="{ 'upload-text__disabled': disabled }"
           >
-            {{ acceptFormat }}
+            {{ acceptStr }}
           </span>
         </template>
       </I18nT>
diff --git a/apps/web-antd/src/components/upload/src/hook.ts b/apps/web-antd/src/components/upload/src/hook.ts
index 2efa91b3..c3e0a41f 100644
--- a/apps/web-antd/src/components/upload/src/hook.ts
+++ b/apps/web-antd/src/components/upload/src/hook.ts
@@ -15,7 +15,7 @@ import { computed, ref, watch } from 'vue';
 import { $t } from '@vben/locales';
 
 import { message, Modal } from 'ant-design-vue';
-import { isFunction } from 'lodash-es';
+import { isFunction, isString } from 'lodash-es';
 
 import { ossInfo } from '#/api/system/oss';
 
@@ -88,7 +88,16 @@ export function useUpload(
   // 组件内部维护fileList
   const innerFileList = ref<UploadFile[]>([]);
 
-  const acceptFormat = computed(() => {
+  const acceptStr = computed(() => {
+    // string类型
+    if (isString(props.acceptFormat)) {
+      return props.acceptFormat;
+    }
+    // 函数类型
+    if (isFunction(props.acceptFormat)) {
+      return props.acceptFormat(props.accept!);
+    }
+    // 默认 会对拓展名做处理
     return props.accept
       ?.split(',')
       .map((item) => {
@@ -272,6 +281,6 @@ export function useUpload(
     beforeUpload,
     customRequest,
     innerFileList,
-    acceptFormat,
+    acceptStr,
   };
 }
diff --git a/apps/web-antd/src/components/upload/src/image-upload.vue b/apps/web-antd/src/components/upload/src/image-upload.vue
index a65acfde..3d482288 100644
--- a/apps/web-antd/src/components/upload/src/image-upload.vue
+++ b/apps/web-antd/src/components/upload/src/image-upload.vue
@@ -49,7 +49,7 @@ const ossIdList = defineModel<string | string[]>('value', {
 });
 
 const {
-  acceptFormat,
+  acceptStr,
   handleChange,
   handleRemove,
   beforeUpload,
@@ -113,7 +113,7 @@ function currentPreview(file: UploadFile) {
             class="text-primary mx-1 font-medium"
             :class="{ 'upload-text__disabled': disabled }"
           >
-            {{ acceptFormat }}
+            {{ acceptStr }}
           </span>
         </template>
       </I18nT>
diff --git a/apps/web-antd/src/components/upload/src/props.d.ts b/apps/web-antd/src/components/upload/src/props.d.ts
index e4f8d920..0157f060 100644
--- a/apps/web-antd/src/components/upload/src/props.d.ts
+++ b/apps/web-antd/src/components/upload/src/props.d.ts
@@ -24,6 +24,11 @@ export interface BaseUploadProps {
    * 同antdv参数
    */
   accept?: string;
+  /**
+   * 你可能使用的是application/pdf这种mime类型, 但是这样用户可能看不懂, 在这里自定义逻辑
+   * @default 原始accept
+   */
+  acceptFormat?: ((accept: string) => string) | string;
   /**
    * 附带的请求参数
    */
diff --git a/apps/web-antd/src/views/演示使用自行删除/upload/index.vue b/apps/web-antd/src/views/演示使用自行删除/upload/index.vue
index 0aa8481a..7cb70871 100644
--- a/apps/web-antd/src/views/演示使用自行删除/upload/index.vue
+++ b/apps/web-antd/src/views/演示使用自行删除/upload/index.vue
@@ -20,6 +20,13 @@ function handlePreview(file: UploadFile) {
     maskClosable: true,
   });
 }
+
+function customAccept(accept: string) {
+  return accept
+    .split(',')
+    .map((str) => str.toUpperCase())
+    .join(',');
+}
 </script>
 
 <template>
@@ -82,12 +89,14 @@ function handlePreview(file: UploadFile) {
         当前绑定值: {{ multipleFileId }}
       </Card>
 
-      <Card title="图片禁用上传" size="small">
+      <Card title="禁用上传" size="small">
         <ImageUpload :disabled="true" :max-count="3" :help-message="false" />
-      </Card>
-
-      <Card title="文件禁用上传" size="small">
-        <FileUpload :disabled="true" :max-count="3" :help-message="false" />
+        <FileUpload
+          class="mt-3"
+          :disabled="true"
+          :max-count="3"
+          :help-message="false"
+        />
       </Card>
 
       <Card title="文件夹上传/自定义helpMessage" size="small">
@@ -101,7 +110,17 @@ function handlePreview(file: UploadFile) {
             <div>自定义helpMessage: {{ JSON.stringify(slotProps) }}</div>
           </template>
         </FileUpload>
-        当前绑定值: {{ multipleFileId }}
+      </Card>
+
+      <Card title="自定义accept显示" size="small">
+        <ImageUpload
+          v-model:value="singleImageId"
+          :accept-format="customAccept"
+        />
+        <ImageUpload
+          v-model:value="singleImageId"
+          accept-format="自定义显示允许的文件类型"
+        />
       </Card>
     </div>
   </Page>