上传图片 imageUpload
可上传单个或多个图片点击按钮上传时,可按住 shift 多选图片,超过数量则不能进行上传
图片上传
数量限制
数量限制
自定义触发上传事件
禁用状态
预览状态
加载失败默认图片
手动调用预览
API
Attributes
| 名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|
| host | String | 无 | 无 | 文件请求服务根地址 需要满足 host+FileType 能访问到 |
| action | String | 无 | 无 | 文件上传请求的接口 |
| fileSize | Number | Number | Number.MAX_SAFE_INTEGER | 文件最大上传的字节数 |
| multiple | Boolean | true/false | false | 上传是否可以选择多个 |
| accepts | String | 无 | 全类型 | 自定义文件类型 |
| limit | Number | 无 | 9 | 可上传文数 |
| disabled | Boolean | true/false | false | 是否禁用上传文件 |
| dropTitle | String | 无 | 上传文件 | 上传文件的文字 |
| files | FileType[] | 无 | [] | 已经上传的文件集合 |
| upload | (item: FileType) => void | 无 | 无 | 自定义上传的方法度 |
| valite | (item: FileType) => string | void | 无 | 自定义校验方法,校验完成后可以将错误提示信息返回 |
| preview | boolean | true/false | false | 只进行预览不进行操作 |
| overcount | (message:str)=>void | 无 | 无 | 选择了 n 个文件,但是剩余可选择文件数量小于 n 时触发的回调 |
FileType
export type FileType = {
key?: string
src?: string
name: string
size?: number
type?: string
suffix?: string
file?: File
state: 'wait' | 'pending' | 'resolve' | 'reject'
progress?: number
message?: string
}
expose
| 名称 | 类型 | 说明 |
|---|
| | |
| files | FileType[] | 当前组件中的的所有文件 |
| input | input:file | 组件中的 input:file 对象 |
| previewImage | input:file | 手动调用组件相关的预览 |
Events
| 名称 | 参数 | 说明 |
|---|
| | |
| delete | (files:FileType[], item:FileType) | 删除后的回调,files 删除后剩余文件,item:被删除的文件 |
| upload | (files:FileType[], items:FileType[]) | 上传后的回调,files 上传后所有文件,item:被上传的文件 |
| preview | (item?:FileType) | 触发预览之前的回调,展示前返回当前文件对象,关闭时不返回任何参数 |