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

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

* chore: revert demo

* test: fix snapshot

* docs: upd
This commit is contained in:
neverland
2021-05-22 20:30:09 +08:00
committed by GitHub
parent 5b6dadc39f
commit 833064adbd
5 changed files with 94 additions and 12 deletions
+23 -1
View File
@@ -159,6 +159,28 @@ export default {
};
```
如果需要针对不同类型的文件来作出不同的大小限制,可以在 `max-size` 属性中传入一个函数,在函数中通过 `file.type` 区分文件类型,返回 `true` 表示超出限制,`false` 表示未超出限制。
```html
<van-uploader multiple :max-size="isOverSize" />
```
```js
import { Toast } from 'vant';
export default {
setup() {
const isOverSize = (file) => {
const maxSize = file.type === 'image/jpeg' ? 500 * 1024 : 1000 * 1024;
return file.size >= maxSize;
};
return {
isOverSize,
};
},
};
```
### 自定义上传样式
通过默认插槽可以自定义上传区域的样式。
@@ -306,7 +328,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 `v3.0.17` | 文件大小限制,单位为 `byte` | _number \| string \| (file: File) => boolean_ | - |
| max-count | 文件上传数量限制 | _number \| string_ | - |
| result-type | 文件读取结果类型,可选值为 `file` `text` | _string_ | `dataUrl` |
| upload-text | 上传区域文字提示 | _string_ | - |