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