上传图片 imageUpload

可上传单个或多个图片点击按钮上传时,可按住 shift 多选图片,超过数量则不能进行上传

图片上传

数量限制

数量限制

自定义触发上传事件

禁用状态

预览状态

加载失败默认图片

手动调用预览

API

Attributes

名称类型可选值默认值说明
hostString文件请求服务根地址 需要满足 host+FileType 能访问到
actionString文件上传请求的接口
fileSizeNumberNumberNumber.MAX_SAFE_INTEGER文件最大上传的字节数
multipleBooleantrue/falsefalse上传是否可以选择多个
acceptsString全类型自定义文件类型
limitNumber9可上传文数
disabledBooleantrue/falsefalse是否禁用上传文件
dropTitleString上传文件上传文件的文字
filesFileType[][]已经上传的文件集合
upload(item: FileType) => void自定义上传的方法度
valite(item: FileType) => stringvoid自定义校验方法,校验完成后可以将错误提示信息返回
previewbooleantrue/falsefalse只进行预览不进行操作
overcount(message:str)=>void选择了 n 个文件,但是剩余可选择文件数量小于 n 时触发的回调

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 对象
previewImageinput:file手动调用组件相关的预览

Events

名称参数说明
delete(files:FileType[], item:FileType)删除后的回调,files 删除后剩余文件,item:被删除的文件
upload(files:FileType[], items:FileType[])上传后的回调,files 上传后所有文件,item:被上传的文件
preview(item?:FileType)触发预览之前的回调,展示前返回当前文件对象,关闭时不返回任何参数

最近更新于: