diff --git a/apps/web-antd/src/components/form-create/components/use-images-upload.tsx b/apps/web-antd/src/components/form-create/components/use-images-upload.tsx index a57cbaa4b..28a23a016 100644 --- a/apps/web-antd/src/components/form-create/components/use-images-upload.tsx +++ b/apps/web-antd/src/components/form-create/components/use-images-upload.tsx @@ -6,18 +6,36 @@ export function useImagesUpload() { return defineComponent({ name: 'ImagesUpload', props: { - multiple: { + accept: { + type: Array, + default: () => ['image/jpeg', 'image/png', 'image/gif'], + }, + disabled: { type: Boolean, - default: true, + default: false, }, maxNumber: { type: Number, default: 5, }, + maxSize: { + type: Number, + default: 5, + }, + multiple: { + type: Boolean, + default: true, + }, }, setup(props) { return () => ( - + ); }, }); diff --git a/apps/web-antd/src/components/form-create/rules/use-upload-file-rule.ts b/apps/web-antd/src/components/form-create/rules/use-upload-file-rule.ts index 91c21e513..770aca6f5 100644 --- a/apps/web-antd/src/components/form-create/rules/use-upload-file-rule.ts +++ b/apps/web-antd/src/components/form-create/rules/use-upload-file-rule.ts @@ -26,7 +26,7 @@ export function useUploadFileRule() { makeRequiredRule(), { type: 'select', - field: 'fileType', + field: 'accept', title: '文件类型', value: ['doc', 'xls', 'ppt', 'txt', 'pdf'], options: [ @@ -40,12 +40,6 @@ export function useUploadFileRule() { mode: 'multiple', }, }, - { - type: 'switch', - field: 'autoUpload', - title: '是否在选取文件后立即进行上传', - value: true, - }, { type: 'switch', field: 'drag', @@ -54,23 +48,23 @@ export function useUploadFileRule() { }, { type: 'switch', - field: 'isShowTip', + field: 'showDescription', title: '是否显示提示', value: true, }, { type: 'inputNumber', - field: 'fileSize', + field: 'maxSize', title: '大小限制(MB)', value: 5, props: { min: 0 }, }, { type: 'inputNumber', - field: 'limit', + field: 'maxNumber', title: '数量限制', value: 5, - props: { min: 0 }, + props: { min: 1 }, }, { type: 'switch', diff --git a/apps/web-antd/src/components/form-create/rules/use-upload-image-rule.ts b/apps/web-antd/src/components/form-create/rules/use-upload-image-rule.ts index 58dd71dc7..dcba9b8bb 100644 --- a/apps/web-antd/src/components/form-create/rules/use-upload-image-rule.ts +++ b/apps/web-antd/src/components/form-create/rules/use-upload-image-rule.ts @@ -24,15 +24,9 @@ export function useUploadImageRule() { props(_: any, { t }: any) { return localeProps(t, `${name}.props`, [ makeRequiredRule(), - { - type: 'switch', - field: 'drag', - title: '拖拽上传', - value: false, - }, { type: 'select', - field: 'fileType', + field: 'accept', title: '图片类型限制', value: ['image/jpeg', 'image/png', 'image/gif'], options: [ @@ -52,40 +46,16 @@ export function useUploadImageRule() { }, { type: 'inputNumber', - field: 'fileSize', + field: 'maxSize', title: '大小限制(MB)', value: 5, props: { min: 0 }, }, - { - type: 'input', - field: 'height', - title: '组件高度', - value: '150px', - }, - { - type: 'input', - field: 'width', - title: '组件宽度', - value: '150px', - }, - { - type: 'input', - field: 'borderradius', - title: '组件边框圆角', - value: '8px', - }, { type: 'switch', field: 'disabled', - title: '是否显示删除按钮', - value: true, - }, - { - type: 'switch', - field: 'showBtnText', - title: '是否显示按钮文字', - value: true, + title: '是否禁用', + value: false, }, ]); }, diff --git a/apps/web-antd/src/components/form-create/rules/use-upload-images-rule.ts b/apps/web-antd/src/components/form-create/rules/use-upload-images-rule.ts index b1559ac3f..b5a5cea98 100644 --- a/apps/web-antd/src/components/form-create/rules/use-upload-images-rule.ts +++ b/apps/web-antd/src/components/form-create/rules/use-upload-images-rule.ts @@ -24,15 +24,9 @@ export function useUploadImagesRule() { props(_: any, { t }: any) { return localeProps(t, `${name}.props`, [ makeRequiredRule(), - { - type: 'switch', - field: 'drag', - title: '拖拽上传', - value: false, - }, { type: 'select', - field: 'fileType', + field: 'accept', title: '图片类型限制', value: ['image/jpeg', 'image/png', 'image/gif'], options: [ @@ -48,40 +42,27 @@ export function useUploadImagesRule() { ], props: { mode: 'multiple', - maxNumber: 5, }, }, { type: 'inputNumber', - field: 'fileSize', + field: 'maxSize', title: '大小限制(MB)', value: 5, props: { min: 0 }, }, { type: 'inputNumber', - field: 'limit', + field: 'maxNumber', title: '数量限制', value: 5, - props: { min: 0 }, + props: { min: 1 }, }, { - type: 'input', - field: 'height', - title: '组件高度', - value: '150px', - }, - { - type: 'input', - field: 'width', - title: '组件宽度', - value: '150px', - }, - { - type: 'input', - field: 'borderradius', - title: '组件边框圆角', - value: '8px', + type: 'switch', + field: 'disabled', + title: '是否禁用', + value: false, }, ]); }, diff --git a/apps/web-ele/src/components/form-create/components/use-images-upload.tsx b/apps/web-ele/src/components/form-create/components/use-images-upload.tsx index a57cbaa4b..28a23a016 100644 --- a/apps/web-ele/src/components/form-create/components/use-images-upload.tsx +++ b/apps/web-ele/src/components/form-create/components/use-images-upload.tsx @@ -6,18 +6,36 @@ export function useImagesUpload() { return defineComponent({ name: 'ImagesUpload', props: { - multiple: { + accept: { + type: Array, + default: () => ['image/jpeg', 'image/png', 'image/gif'], + }, + disabled: { type: Boolean, - default: true, + default: false, }, maxNumber: { type: Number, default: 5, }, + maxSize: { + type: Number, + default: 5, + }, + multiple: { + type: Boolean, + default: true, + }, }, setup(props) { return () => ( - + ); }, }); diff --git a/apps/web-ele/src/components/form-create/rules/use-upload-file-rule.ts b/apps/web-ele/src/components/form-create/rules/use-upload-file-rule.ts index add6c23bd..c02638ab5 100644 --- a/apps/web-ele/src/components/form-create/rules/use-upload-file-rule.ts +++ b/apps/web-ele/src/components/form-create/rules/use-upload-file-rule.ts @@ -26,7 +26,7 @@ export function useUploadFileRule() { makeRequiredRule(), { type: 'select', - field: 'fileType', + field: 'accept', title: '文件类型', value: ['doc', 'xls', 'ppt', 'txt', 'pdf'], options: [ @@ -40,12 +40,6 @@ export function useUploadFileRule() { multiple: true, }, }, - { - type: 'switch', - field: 'autoUpload', - title: '是否在选取文件后立即进行上传', - value: true, - }, { type: 'switch', field: 'drag', @@ -54,23 +48,23 @@ export function useUploadFileRule() { }, { type: 'switch', - field: 'isShowTip', + field: 'showDescription', title: '是否显示提示', value: true, }, { type: 'inputNumber', - field: 'fileSize', + field: 'maxSize', title: '大小限制(MB)', value: 5, props: { min: 0 }, }, { type: 'inputNumber', - field: 'limit', + field: 'maxNumber', title: '数量限制', value: 5, - props: { min: 0 }, + props: { min: 1 }, }, { type: 'switch', diff --git a/apps/web-ele/src/components/form-create/rules/use-upload-image-rule.ts b/apps/web-ele/src/components/form-create/rules/use-upload-image-rule.ts index cd0fd0022..abcc73a3f 100644 --- a/apps/web-ele/src/components/form-create/rules/use-upload-image-rule.ts +++ b/apps/web-ele/src/components/form-create/rules/use-upload-image-rule.ts @@ -24,15 +24,9 @@ export function useUploadImageRule() { props(_: any, { t }: any) { return localeProps(t, `${name}.props`, [ makeRequiredRule(), - { - type: 'switch', - field: 'drag', - title: '拖拽上传', - value: false, - }, { type: 'select', - field: 'fileType', + field: 'accept', title: '图片类型限制', value: ['image/jpeg', 'image/png', 'image/gif'], options: [ @@ -52,40 +46,16 @@ export function useUploadImageRule() { }, { type: 'inputNumber', - field: 'fileSize', + field: 'maxSize', title: '大小限制(MB)', value: 5, props: { min: 0 }, }, - { - type: 'input', - field: 'height', - title: '组件高度', - value: '150px', - }, - { - type: 'input', - field: 'width', - title: '组件宽度', - value: '150px', - }, - { - type: 'input', - field: 'borderradius', - title: '组件边框圆角', - value: '8px', - }, { type: 'switch', field: 'disabled', - title: '是否显示删除按钮', - value: true, - }, - { - type: 'switch', - field: 'showBtnText', - title: '是否显示按钮文字', - value: true, + title: '是否禁用', + value: false, }, ]); }, diff --git a/apps/web-ele/src/components/form-create/rules/use-upload-images-rule.ts b/apps/web-ele/src/components/form-create/rules/use-upload-images-rule.ts index 5d0a6fd0a..9ba359246 100644 --- a/apps/web-ele/src/components/form-create/rules/use-upload-images-rule.ts +++ b/apps/web-ele/src/components/form-create/rules/use-upload-images-rule.ts @@ -24,15 +24,9 @@ export function useUploadImagesRule() { props(_: any, { t }: any) { return localeProps(t, `${name}.props`, [ makeRequiredRule(), - { - type: 'switch', - field: 'drag', - title: '拖拽上传', - value: false, - }, { type: 'select', - field: 'fileType', + field: 'accept', title: '图片类型限制', value: ['image/jpeg', 'image/png', 'image/gif'], options: [ @@ -48,40 +42,27 @@ export function useUploadImagesRule() { ], props: { multiple: true, - maxNumber: 5, }, }, { type: 'inputNumber', - field: 'fileSize', + field: 'maxSize', title: '大小限制(MB)', value: 5, props: { min: 0 }, }, { type: 'inputNumber', - field: 'limit', + field: 'maxNumber', title: '数量限制', value: 5, - props: { min: 0 }, + props: { min: 1 }, }, { - type: 'input', - field: 'height', - title: '组件高度', - value: '150px', - }, - { - type: 'input', - field: 'width', - title: '组件宽度', - value: '150px', - }, - { - type: 'input', - field: 'borderradius', - title: '组件边框圆角', - value: '8px', + type: 'switch', + field: 'disabled', + title: '是否禁用', + value: false, }, ]); }, diff --git a/packages/@core/base/shared/src/utils/upload.ts b/packages/@core/base/shared/src/utils/upload.ts index a1a5dc886..57718b4f8 100644 --- a/packages/@core/base/shared/src/utils/upload.ts +++ b/packages/@core/base/shared/src/utils/upload.ts @@ -103,11 +103,37 @@ export const defaultImageAccepts = [ 'webp', ]; +/** + * 图片类 MIME 子类型到扩展名的别名映射;未列出的子类型按字面量与扩展名比较 + */ +const IMAGE_MIME_SUBTYPE_ALIASES: Record = { + apng: ['apng', 'png'], + jpeg: ['jpeg', 'jpg'], + pjpeg: ['jpeg', 'jpg'], + 'svg+xml': ['svg'], + tiff: ['tif', 'tiff'], + 'x-icon': ['ico'], +}; + +/** + * 判断 MIME 子类型是否与文件扩展名匹配;image/* 限定为已知图片扩展名集合 + */ +function matchMimeSubtype(subtype: string, ext: string): boolean { + if (subtype === '*') { + return defaultImageAccepts.includes(ext); + } + const aliases = IMAGE_MIME_SUBTYPE_ALIASES[subtype]; + if (aliases) { + return aliases.includes(ext); + } + return subtype === ext; +} + /** * 判断文件是否为图片 * * @param filename 文件名 - * @param accepts 支持的文件类型 + * @param accepts 支持的文件类型,兼容 MIME(如 image/png)、.ext(如 .png)与纯后缀(如 png) * @returns 是否为图片 */ export function isImage( @@ -118,7 +144,23 @@ export function isImage( return false; } const ext = filename.split('.').pop()?.toLowerCase() || ''; - return accepts.includes(ext); + if (!ext) { + return false; + } + return accepts.some((accept) => { + const lower = accept.toLowerCase(); + // MIME 类型,例如 image/png ;image/* 仅放行已知图片扩展 + if (lower.includes('/')) { + const subtype = lower.split('/').pop() || ''; + return matchMimeSubtype(subtype, ext); + } + // 以点号开头的扩展名,例如 .png + if (lower.startsWith('.')) { + return lower.slice(1) === ext; + } + // 纯后缀 + return lower === ext; + }); } /**