feat(upload prop:maxSize): from Upload component accept prop maxSize (AI prompt fixed) (#7059)

* feat(upload prop:maxSize): from component accept prop maxSize * feat(upload prop:maxSize): from component accept prop maxSize * feat(upload prop:maxSize): from component accept prop maxSize * feat(upload prop:maxSize): from component accept prop maxSize
2026-04-13 21:23:15 +08:00 · 2026-01-03 13:19:40 +08:00
parent 7d2bc2e885
commit 81a61558cb
5 changed files with 323 additions and 293 deletions
--- a/apps/web-antd/src/adapter/component/index.ts
+++ b/apps/web-antd/src/adapter/component/index.ts
@@ -29,7 +29,7 @@ import { IconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 import { isEmpty } from '@vben/utils';

-import { notification } from 'ant-design-vue';
+import { message, notification } from 'ant-design-vue';

 const AutoComplete = defineAsyncComponent(
  () => import('ant-design-vue/es/auto-complete'),
@@ -119,79 +119,11 @@ const withDefaultPlaceholder = <T extends Component>(
 };

 const withPreviewUpload = () => {
-  return defineComponent({
-    name: Upload.name,
-    emits: ['change', 'update:modelValue'],
-    setup: (
-      props: any,
-      { attrs, slots, emit }: { attrs: any; emit: any; slots: any },
-    ) => {
-      const previewVisible = ref<boolean>(false);
-
-      const placeholder = attrs?.placeholder || $t(`ui.placeholder.upload`);
-
-      const listType = attrs?.listType || attrs?.['list-type'] || 'text';
-
-      const fileList = ref<UploadProps['fileList']>(
-        attrs?.fileList || attrs?.['file-list'] || [],
-      );
-
-      const handleChange = async (event: UploadChangeParam) => {
-        fileList.value = event.fileList;
-        emit('change', event);
-        emit(
-          'update:modelValue',
-          event.fileList?.length ? fileList.value : undefined,
-        );
-      };
-
-      const handlePreview = async (file: UploadFile) => {
-        previewVisible.value = true;
-        await previewImage(file, previewVisible, fileList);
-      };
-
-      const renderUploadButton = (): any => {
-        const isDisabled = attrs.disabled;
-
-        // 如果禁用，不渲染上传按钮
-        if (isDisabled) {
-          return null;
-        }
-
-        // 否则渲染默认上传按钮
-        return isEmpty(slots)
-          ? createDefaultSlotsWithUpload(listType, placeholder)
-          : slots;
-      };
-
-      // 可以监听到表单API设置的值
-      watch(
-        () => attrs.modelValue,
-        (res) => {
-          fileList.value = res;
-        },
-      );
-
-      return () =>
-        h(
-          Upload,
-          {
-            ...props,
-            ...attrs,
-            fileList: fileList.value,
-            onChange: handleChange,
-            onPreview: handlePreview,
-          },
-          renderUploadButton(),
-        );
-    },
-  });
-};
-
-const createDefaultSlotsWithUpload = (
+  // 创建默认的上传按钮插槽
+  const createDefaultSlotsWithUpload = (
    listType: string,
    placeholder: string,
-) => {
+  ) => {
    switch (listType) {
      case 'picture-card': {
        return {
@@ -214,13 +146,13 @@ const createDefaultSlotsWithUpload = (
        };
      }
    }
-};
-
-const previewImage = async (
+  };
+  // 构建预览图片组
+  const previewImage = async (
    file: UploadFile,
    visible: Ref<boolean>,
    fileList: Ref<UploadProps['fileList']>,
-) => {
+  ) => {
    // 检查是否为图片文件的辅助函数
    const isImageFile = (file: UploadFile): boolean => {
      const imageExtensions = new Set([
@@ -249,7 +181,7 @@ const previewImage = async (
      } else if (file.preview) {
        window.open(file.preview, '_blank');
      } else {
-      console.warn('无法打开文件，没有可用的URL或预览地址');
+        message.error($t('ui.formRules.previewWarning'));
      }
      return;
    }
@@ -326,6 +258,85 @@ const previewImage = async (
    };

    render(h(PreviewWrapper), container);
+  };
+  return defineComponent({
+    name: Upload.name,
+    emits: ['update:modelValue'],
+    setup: (
+      props: any,
+      { attrs, slots, emit }: { attrs: any; emit: any; slots: any },
+    ) => {
+      const previewVisible = ref<boolean>(false);
+
+      const placeholder = attrs?.placeholder || $t(`ui.placeholder.upload`);
+
+      const listType = attrs?.listType || attrs?.['list-type'] || 'text';
+
+      const fileList = ref<UploadProps['fileList']>(
+        attrs?.fileList || attrs?.['file-list'] || [],
+      );
+
+      const handleBeforeUpload = (file: UploadFile) => {
+        if (attrs.maxSize && (file.size || 0) / 1024 / 1024 > attrs.maxSize) {
+          message.error($t('ui.formRules.sizeLimit', [attrs.maxSize]));
+          file.status = 'removed';
+          return false;
+        }
+        return attrs.beforeUpload?.(file) ?? true;
+      };
+
+      const handleChange = async (event: UploadChangeParam) => {
+        fileList.value = event.fileList.filter(
+          (file) => file.status !== 'removed',
+        );
+        emit(
+          'update:modelValue',
+          event.fileList?.length ? fileList.value : undefined,
+        );
+      };
+
+      const handlePreview = async (file: UploadFile) => {
+        previewVisible.value = true;
+        await previewImage(file, previewVisible, fileList);
+      };
+
+      const renderUploadButton = (): any => {
+        const isDisabled = attrs.disabled;
+
+        // 如果禁用，不渲染上传按钮
+        if (isDisabled) {
+          return null;
+        }
+
+        // 否则渲染默认上传按钮
+        return isEmpty(slots)
+          ? createDefaultSlotsWithUpload(listType, placeholder)
+          : slots;
+      };
+
+      // 可以监听到表单API设置的值
+      watch(
+        () => attrs.modelValue,
+        (res) => {
+          fileList.value = res;
+        },
+      );
+
+      return () =>
+        h(
+          Upload,
+          {
+            ...props,
+            ...attrs,
+            fileList: fileList.value,
+            beforeUpload: handleBeforeUpload,
+            onChange: handleChange,
+            onPreview: handlePreview,
+          },
+          renderUploadButton(),
+        );
+    },
+  });
 };

 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
--- a/packages/locales/src/langs/en-US/ui.json
+++ b/packages/locales/src/langs/en-US/ui.json
@@ -7,7 +7,9 @@
    "length": "{0} must be {1} characters long",
    "alreadyExists": "{0} `{1}` already exists",
    "startWith": "{0} must start with `{1}`",
-    "invalidURL": "Please input a valid URL"
+    "invalidURL": "Please input a valid URL",
+    "sizeLimit": "The file size cannot exceed {0}MB",
+    "previewWarning": "Unable to open the file, there is no available URL or preview address"
  },
  "actionTitle": {
    "edit": "Modify {0}",
@@ -24,7 +26,8 @@
  },
  "placeholder": {
    "input": "Please enter",
-    "select": "Please select"
+    "select": "Please select",
+    "upload": "Click to upload"
  },
  "captcha": {
    "title": "Please complete the security verification",
--- a/packages/locales/src/langs/zh-CN/ui.json
+++ b/packages/locales/src/langs/zh-CN/ui.json
@@ -7,7 +7,9 @@
    "length": "{0}长度必须为{1}个字符",
    "alreadyExists": "{0} `{1}` 已存在",
    "startWith": "{0}必须以 {1} 开头",
-    "invalidURL": "请输入有效的链接"
+    "invalidURL": "请输入有效的链接",
+    "sizeLimit": "文件大小不能超过 {0}MB",
+    "previewWarning": "无法打开文件，没有可用的URL或预览地址"
  },
  "actionTitle": {
    "edit": "修改{0}",
@@ -24,7 +26,8 @@
  },
  "placeholder": {
    "input": "请输入",
-    "select": "请选择"
+    "select": "请选择",
+    "upload": "点击上传"
  },
  "captcha": {
    "title": "请完成安全验证",
--- a/playground/src/adapter/component/index.ts
+++ b/playground/src/adapter/component/index.ts
@@ -29,7 +29,7 @@ import { IconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 import { isEmpty } from '@vben/utils';

-import { notification } from 'ant-design-vue';
+import { message, notification } from 'ant-design-vue';

 const AutoComplete = defineAsyncComponent(
  () => import('ant-design-vue/es/auto-complete'),
@@ -128,79 +128,11 @@ const withDefaultPlaceholder = <T extends Component>(
 };

 const withPreviewUpload = () => {
-  return defineComponent({
-    name: Upload.name,
-    emits: ['change', 'update:modelValue'],
-    setup: (
-      props: any,
-      { attrs, slots, emit }: { attrs: any; emit: any; slots: any },
-    ) => {
-      const previewVisible = ref<boolean>(false);
-
-      const placeholder = attrs?.placeholder || $t(`ui.placeholder.upload`);
-
-      const listType = attrs?.listType || attrs?.['list-type'] || 'text';
-
-      const fileList = ref<UploadProps['fileList']>(
-        attrs?.fileList || attrs?.['file-list'] || [],
-      );
-
-      const handleChange = async (event: UploadChangeParam) => {
-        fileList.value = event.fileList;
-        emit('change', event);
-        emit(
-          'update:modelValue',
-          event.fileList?.length ? fileList.value : undefined,
-        );
-      };
-
-      const handlePreview = async (file: UploadFile) => {
-        previewVisible.value = true;
-        await previewImage(file, previewVisible, fileList);
-      };
-
-      const renderUploadButton = (): any => {
-        const isDisabled = attrs.disabled;
-
-        // 如果禁用，不渲染上传按钮
-        if (isDisabled) {
-          return null;
-        }
-
-        // 否则渲染默认上传按钮
-        return isEmpty(slots)
-          ? createDefaultSlotsWithUpload(listType, placeholder)
-          : slots;
-      };
-
-      // 可以监听到表单API设置的值
-      watch(
-        () => attrs.modelValue,
-        (res) => {
-          fileList.value = res;
-        },
-      );
-
-      return () =>
-        h(
-          Upload,
-          {
-            ...props,
-            ...attrs,
-            fileList: fileList.value,
-            onChange: handleChange,
-            onPreview: handlePreview,
-          },
-          renderUploadButton(),
-        );
-    },
-  });
-};
-
-const createDefaultSlotsWithUpload = (
+  // 创建默认的上传按钮插槽
+  const createDefaultSlotsWithUpload = (
    listType: string,
    placeholder: string,
-) => {
+  ) => {
    switch (listType) {
      case 'picture-card': {
        return {
@@ -223,13 +155,13 @@ const createDefaultSlotsWithUpload = (
        };
      }
    }
-};
-
-const previewImage = async (
+  };
+  // 构建预览图片组
+  const previewImage = async (
    file: UploadFile,
    visible: Ref<boolean>,
    fileList: Ref<UploadProps['fileList']>,
-) => {
+  ) => {
    // 检查是否为图片文件的辅助函数
    const isImageFile = (file: UploadFile): boolean => {
      const imageExtensions = new Set([
@@ -258,7 +190,7 @@ const previewImage = async (
      } else if (file.preview) {
        window.open(file.preview, '_blank');
      } else {
-      console.warn('无法打开文件，没有可用的URL或预览地址');
+        message.error($t('ui.formRules.previewWarning'));
      }
      return;
    }
@@ -335,6 +267,85 @@ const previewImage = async (
    };

    render(h(PreviewWrapper), container);
+  };
+  return defineComponent({
+    name: Upload.name,
+    emits: ['update:modelValue'],
+    setup: (
+      props: any,
+      { attrs, slots, emit }: { attrs: any; emit: any; slots: any },
+    ) => {
+      const previewVisible = ref<boolean>(false);
+
+      const placeholder = attrs?.placeholder || $t(`ui.placeholder.upload`);
+
+      const listType = attrs?.listType || attrs?.['list-type'] || 'text';
+
+      const fileList = ref<UploadProps['fileList']>(
+        attrs?.fileList || attrs?.['file-list'] || [],
+      );
+
+      const handleBeforeUpload = (file: UploadFile) => {
+        if (attrs.maxSize && (file.size || 0) / 1024 / 1024 > attrs.maxSize) {
+          message.error($t('ui.formRules.sizeLimit', [attrs.maxSize]));
+          file.status = 'removed';
+          return false;
+        }
+        return attrs.beforeUpload?.(file) ?? true;
+      };
+
+      const handleChange = async (event: UploadChangeParam) => {
+        fileList.value = event.fileList.filter(
+          (file) => file.status !== 'removed',
+        );
+        emit(
+          'update:modelValue',
+          event.fileList?.length ? fileList.value : undefined,
+        );
+      };
+
+      const handlePreview = async (file: UploadFile) => {
+        previewVisible.value = true;
+        await previewImage(file, previewVisible, fileList);
+      };
+
+      const renderUploadButton = (): any => {
+        const isDisabled = attrs.disabled;
+
+        // 如果禁用，不渲染上传按钮
+        if (isDisabled) {
+          return null;
+        }
+
+        // 否则渲染默认上传按钮
+        return isEmpty(slots)
+          ? createDefaultSlotsWithUpload(listType, placeholder)
+          : slots;
+      };
+
+      // 可以监听到表单API设置的值
+      watch(
+        () => attrs.modelValue,
+        (res) => {
+          fileList.value = res;
+        },
+      );
+
+      return () =>
+        h(
+          Upload,
+          {
+            ...props,
+            ...attrs,
+            fileList: fileList.value,
+            beforeUpload: handleBeforeUpload,
+            onChange: handleChange,
+            onPreview: handlePreview,
+          },
+          renderUploadButton(),
+        );
+    },
+  });
 };

 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
--- a/playground/src/views/examples/form/basic.vue
+++ b/playground/src/views/examples/form/basic.vue
@@ -342,6 +342,8 @@ const [BaseForm, baseFormApi] = useVbenForm({
        customRequest: upload_file,
        disabled: false,
        maxCount: 1,
+        // 单位：MB
+        maxSize: 2,
        multiple: false,
        showUploadList: true,
        // 上传列表的内建样式，支持四种基本样式 text, picture, picture-card 和 picture-circle
@@ -354,7 +356,7 @@ const [BaseForm, baseFormApi] = useVbenForm({
          default: () => $t('examples.form.upload-image'),
        };
      },
-      rules: 'required',
+      rules: 'selectRequired',
    },
  ],
  // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个