feat: 自定义accept显示

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>

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

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>

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;
   /**
    * 附带的请求参数
    */

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>