ImageUpload 图片上传
基于element-plus
upload
组件的二次封装。对图片的基础操作做了简化。
基础用法
INFO
通过 api
异步逻辑,自定义上传逻辑,然后拼装图片外链地址参数 url
多图控制
属性
属性名 | 说明 | 类型 | 是否拓展 | 默认值 |
---|---|---|---|---|
v-model | 图片地址 | string | 是 | - |
api | 异步上传方法 | Function | 是 | - |
image-types | 图片限制类型 | Array | 是 | webp,png,jpg,gif,bmp,jpeg |
limit-size | 图片限制大小,单位M | number | 是 | 10 |
style | 自定义样式 | Record | 是 | { width: '100px', height: '100px' } |
fix | 图片填充模式 | enum | 是 | contain |
action | 请求 URL | string | 否 | "" |
disabled | 是否禁用 | boolean | 否 | false |
on-success | 文件上传成功时的钩子 | Function | 否 | - |
on-error | 文件上传失败时的钩子 | Function | 否 | - |
on-progress | 文件上传时的钩子 | Function | 否 | - |
on-change | 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用 | Function | 否 | - |
事件
事件名 | 说明 | 类型 | 是否拓展 |
---|---|---|---|
update:model-value | 绑定值变化时触发的事件 | Function | 否 |