上传文件 fileUpload

头像可以用来代表人物或对象, 支持三种类型:图标、图片和字符

按钮上传

文件格式

数量限制

文件大小限制

自定义长传

自定义触发上传事件

自定义样式

尺寸

禁用状态

拖拽上传

预览展示

API

Attributes

名称类型可选值默认值说明
hostString文件请求服务根地址 需要满足 host+FileType 能访问到
actionString文件上传请求的接口
fileSizeNumberNumber5242880文件最大上传的字节数
multipleBooleantrue/falsefalse上传是否可以选择多个
acceptsString全类型自定义文件类型
limitNumber9可上传文数
sizeSizelarge/medium/smallmedium文件上传按钮的大小
typeString"drop"/"button"button上传的展示形式,是拖拽上传,还是按钮上传(只是外观不同,本身都支持拖拽)
disabledBooleantrue/falsefalse是否禁用上传文件
uplaodStlyeObject上传按钮的样式上传按钮的样式
fileListStyleObject已上传列表的样式已上传列表的样式
errorTextString文件体积过大报错文案
valite(item: FileType) => stringvoid自定义校验方法,校验完成后可以将错误提示信息返回
dropTitleString拖拽区域文字
dropContentString拖拽区域内容文字
filesFileType[][]已经上传的文件集合
upload(item: FileType) => void自定义上传的方法度
valite(item: FileType) => stringvoid自定义校验方法,校验完成后可以将错误提示信息返回
previewbooleantrue/falsefalse只进行预览不进行操作

FileType

// 当前已经上传的文件集合
export type FileType = {
	// 文件服务器对应得Key
	key?: string
	// 文件的完成路径
	src?: string
	// 文件名称
	name: string
	// 文件的体积
	size?: number
	// 文件类型(标准文件类型)
	type?: string
	// 文件的后缀
	suffix?: string
	// 当前文件对象
	file?: File
	// 状态
	state: 'wait' | 'pending' | 'resolve' | 'reject'
	// 进度
	progress?: number
	// 校验失败的信息
	message?: string
}

expose

名称类型说明
filesFileType[]当前组件中的的所有文件
inputinput:file组件中的 input:file 对象

Events

名称参数说明
delete(files:FileType[], item:FileType)删除后的回调,files 删除后剩余文件,item:被删除的文件
upload(files:FileType[], items:FileType[])上传后的回调,files 上传后所有文件,item:被上传的文件

最近更新于: