feat(Uploader): max-size prop can be a function (#8745)

src/uploader/README.md

@@ -110,7 +110,26 @@ export default {
   methods: {
     onOversize(file) {
       console.log(file);
-      Toast('File size cannot exceed 500kb);
+      Toast('File size cannot exceed 500kb');
+    },
+  },
+};
+```
+
+If you need to make different size limits for different types of files, you can pass a function to the `max-size` props.
+
+```html
+<van-uploader multiple :max-size="isOverSize" />
+```
+
+```js
+import { Toast } from 'vant';
+
+export default {
+  methods: {
+    isOverSize() {
+      const maxSize = file.type === 'image/jpeg' ? 500 * 1024 : 1000 * 1024;
+      return file.size >= maxSize;
     },
   },
 };
@@ -235,7 +254,7 @@ export default {
 | name | Input name | _number \| string_ | - |
 | preview-size | Size of preview image | _number \| string_ | `80px` |
 | preview-image | Whether to show image preview | _boolean_ | `true` |
-| preview-full-image | Whethe to show full screen image preview when image is clicked | _boolean_ | `true` |
+| preview-full-image | Whether to show full screen image preview when image is clicked | _boolean_ | `true` |
 | preview-options `v2.9.3` | Options of full screen image preview，see [ImagePreview](#/en-US/image-preview) | _object_ | - |
 | multiple | Whether to enable multiple selection pictures | _boolean_ | `false` |
 | disabled | Whether to disabled the upload | _boolean_ | `false` |
@@ -246,7 +265,7 @@ export default {
 | after-read | Hook after reading the file | _Function_ | - |
 | before-read | Hook before reading the file, return false to stop reading the file, can return Promise | _Function_ | - |
 | before-delete | Hook before delete the file, return false to stop reading the file, can return Promise | _Function_ | - |
-| max-size | Max size of file | _number \| string_ | - |
+| max-size `v2.12.20` | Max size of file | _number \| string \| (file: File) => boolean_ | - |
 | max-count | Max count of image | _number \| string_ | - |
 | result-type | Type of file read result, can be set to `file` `text` | _string_ | `dataUrl` |
 | upload-text | Upload text | _string_ | - |
@@ -269,7 +288,7 @@ export default {
 | default | Custom icon | - |
 | preview-cover `v2.9.1` | Custom content that covers the image preview | `item: FileListItem` |
 
-### Parematers of before-read、after-read、before-delete
+### Parameters of before-read、after-read、before-delete
 
 | Attribute | Description                          | Type     |
 | --------- | ------------------------------------ | -------- |

src/uploader/README.zh-CN.md

@@ -136,6 +136,25 @@ export default {
 };
 ```
 
+如果需要针对不同类型的文件来作出不同的大小限制，可以在 `max-size` 属性中传入一个函数，在函数中通过 `file.type` 区分文件类型，返回 `true` 表示超出限制，`false` 表示未超出限制。
+
+```html
+<van-uploader multiple :max-size="isOverSize" />
+```
+
+```js
+import { Toast } from 'vant';
+
+export default {
+  methods: {
+    isOverSize() {
+      const maxSize = file.type === 'image/jpeg' ? 500 * 1024 : 1000 * 1024;
+      return file.size >= maxSize;
+    },
+  },
+};
+```
+
 ### 自定义上传样式
 
 通过默认插槽可以自定义上传区域的样式。
@@ -276,7 +295,7 @@ export default {
 | after-read | 文件读取完成后的回调函数 | _Function_ | - |
 | before-read | 文件读取前的回调函数，返回 `false` 可终止文件读取，<br>支持返回 `Promise` | _Function_ | - |
 | before-delete | 文件删除前的回调函数，返回 `false` 可终止文件读取，<br>支持返回 `Promise` | _Function_ | - |
-| max-size | 文件大小限制，单位为 `byte` | _number \| string_ | - |
+| max-size `v2.12.20` | 文件大小限制，单位为 `byte` | _number \| string \| (file: File) => boolean_ | - |
 | max-count | 文件上传数量限制 | _number \| string_ | - |
 | result-type | 文件读取结果类型，可选值为 `file` `text` | _string_ | `dataUrl` |
 | upload-text | 上传区域文字提示 | _string_ | - |

src/uploader/index.js

@@ -44,7 +44,7 @@ export default createComponent({
       default: () => [],
     },
     maxSize: {
-      type: [Number, String],
+      type: [Number, String, Function],
       default: Number.MAX_VALUE,
     },
     maxCount: {
@@ -185,7 +185,7 @@ export default createComponent({
           validFiles = [];
           files.forEach((item) => {
             if (item.file) {
-              if (item.file.size > this.maxSize) {
+              if (isOversize(item.file, this.maxSize)) {
                 oversizeFiles.push(item);
               } else {
                 validFiles.push(item);

src/uploader/utils.ts

@@ -1,5 +1,9 @@
+import { isFunction } from '../utils';
+
 export type ResultType = 'dataUrl' | 'text' | 'file';
 
+export type UploaderMaxSize = number | string | ((file: File) => boolean);
+
 export function toArray<T>(item: T | T[]): T[] {
   if (Array.isArray(item)) {
     return item;
@@ -31,9 +35,17 @@ export function readFile(file: File, resultType: ResultType) {
 
 export function isOversize(
   files: File | File[],
-  maxSize: number | string
+  maxSize: UploaderMaxSize
 ): boolean {
-  return toArray(files).some((file) => file.size > maxSize);
+  return toArray(files).some((file) => {
+    if (file) {
+      if (isFunction(maxSize)) {
+        return maxSize(file);
+      }
+      return file.size > maxSize;
+    }
+    return false;
+  });
 }
 
 export type FileListItem = {