diff --git a/src/uploader/README.md b/src/uploader/README.md index eb9a612e5..671f33462 100644 --- a/src/uploader/README.md +++ b/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 + +``` + +```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 | | --------- | ------------------------------------ | -------- | diff --git a/src/uploader/README.zh-CN.md b/src/uploader/README.zh-CN.md index c0d8b5b2f..2d190d3b4 100644 --- a/src/uploader/README.zh-CN.md +++ b/src/uploader/README.zh-CN.md @@ -136,6 +136,25 @@ export default { }; ``` +如果需要针对不同类型的文件来作出不同的大小限制,可以在 `max-size` 属性中传入一个函数,在函数中通过 `file.type` 区分文件类型,返回 `true` 表示超出限制,`false` 表示未超出限制。 + +```html + +``` + +```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` 可终止文件读取,
支持返回 `Promise` | _Function_ | - | | before-delete | 文件删除前的回调函数,返回 `false` 可终止文件读取,
支持返回 `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_ | - | diff --git a/src/uploader/index.js b/src/uploader/index.js index 090d5acac..3b2914dcb 100644 --- a/src/uploader/index.js +++ b/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); diff --git a/src/uploader/utils.ts b/src/uploader/utils.ts index 1f75ad488..7db512aea 100644 --- a/src/uploader/utils.ts +++ b/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(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 = {