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('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 }} 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([]); - 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('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 }} 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(','); +} - 当前绑定值: {{ multipleFileId }} + + + + +