ImageUpload 图片上传

基于element-plus upload组件的二次封装。对图片的基础操作做了简化。

基础用法

INFO

通过 api 异步逻辑，自定义上传逻辑，然后拼装图片外链地址参数 url

多图控制

属性

属性名	说明	类型	是否拓展	默认值
v-model	图片地址	string	是	-
api	异步上传方法（必传；不传时走内置兜底返回空 url，上传必定失败）	Function (file: File) => Promise<{ url: string }>	是	() => Promise.resolve({ url: '' })
image-types	图片限制类型（MIME 数组）	Array 'image/webp','image/png','image/jpg','image/gif','image/bmp','image/jpeg'	是	['image/webp','image/png','image/jpg','image/gif','image/bmp','image/jpeg']
limit-size	图片限制大小，单位M	number	是	10
style	自定义样式	Record	是	{ width: '100px', height: '100px' }
fit	图片填充模式	enum fillcontaincovernonescale-down	是	contain
multiple	是否开启多图模式	boolean	是	false
limit	多图模式下的最大上传数量	number	是	9
disabled	是否禁用	boolean	是	false
on-progress	文件上传时的钩子	Function (evt: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadFiles) => void	否	-
on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	Function (uploadFile: UploadFile, uploadFiles: UploadFiles) => void	否	-

事件

事件名	说明	类型	是否拓展
update:model-value	绑定值变化时触发的事件	Function (value) => void	是
success	上传成功时触发	Function (file: File, url: string) => void	是
error	上传失败时触发；多图模式下接口返回的 url 不在协议白名单（http(s)😕/、data:、blob:）内时同样触发	Function (file: File, error: Error) => void	是
delete	删除图片时触发	Function (url: string) => void	是

方法

方法名	说明	参数	返回值
clearFiles	清空所有图片	-	void
submit	手动触发上传	-	void
getUploadRef	获取 el-upload 实例	-	ElUpload 实例
getUrlList	获取当前解析后的图片URL列表	-	string[]