上传文件 fileUpload
头像可以用来代表人物或对象, 支持三种类型:图标、图片和字符
按钮上传
文件格式
数量限制
文件大小限制
自定义长传
自定义触发上传事件
自定义样式
尺寸
禁用状态
拖拽上传
预览展示
API
Attributes
| 名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|
| host | String | 无 | 无 | 文件请求服务根地址 需要满足 host+FileType 能访问到 |
| action | String | 无 | 无 | 文件上传请求的接口 |
| fileSize | Number | Number | 5242880 | 文件最大上传的字节数 |
| multiple | Boolean | true/false | false | 上传是否可以选择多个 |
| accepts | String | 无 | 全类型 | 自定义文件类型 |
| limit | Number | 无 | 9 | 可上传文数 |
| size | Size | large/medium/small | medium | 文件上传按钮的大小 |
| type | String | "drop"/"button" | button | 上传的展示形式,是拖拽上传,还是按钮上传(只是外观不同,本身都支持拖拽) |
| disabled | Boolean | true/false | false | 是否禁用上传文件 |
| uplaodStlye | Object | 无 | 上传按钮的样式 | 上传按钮的样式 |
| fileListStyle | Object | 无 | 已上传列表的样式 | 已上传列表的样式 |
| errorText | String | 无 | 文件体积过大 | 报错文案 |
| valite | (item: FileType) => string | void | 无 | 自定义校验方法,校验完成后可以将错误提示信息返回 |
| dropTitle | String | 无 | 无 | 拖拽区域文字 |
| dropContent | String | 无 | 无 | 拖拽区域内容文字 |
| files | FileType[] | 无 | [] | 已经上传的文件集合 |
| upload | (item: FileType) => void | 无 | 无 | 自定义上传的方法度 |
| valite | (item: FileType) => string | void | 无 | 自定义校验方法,校验完成后可以将错误提示信息返回 |
| preview | boolean | true/false | false | 只进行预览不进行操作 |
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 对象 |
Events
| 名称 | 参数 | 说明 |
|---|
| | |
| delete | (files:FileType[], item:FileType) | 删除后的回调,files 删除后剩余文件,item:被删除的文件 |
| upload | (files:FileType[], items:FileType[]) | 上传后的回调,files 上传后所有文件,item:被上传的文件 |