简介
封装上传图片组件,支持拖拽排序、裁剪图片。
支持两种模式:
1、直接返回图片的相对路径(默认)
2、传入一个唯一ID,组件会自动查询、保存上传的图片
使用示例
template
<mb-upload-image
v-model="multipleImgUrl"
:width="120"
:height="120"
multiple
:limit="3"
@change="multipleImgChange"
/>
upload image props
名称 | 类型 | 默认值 | 说明 | 版本 |
---|---|---|---|---|
modelValue | String | Array | undefined | ||
externalId | String | undefined | 唯一ID,比如可以传入一个用户ID | |
externalType | String | undefined | externalId下的一个分类,比如头像 ,身份证 | |
multiple | Boolean | false | 是否开启多张上传 | |
limit | Number | 2 | 上传数量限制 | |
width | Number | 100 | 宽度,单位px | |
height | Number | 100 | 高度,单位px | |
tip | String | '' | 上传提示 | |
tipColor | String | '' | 提示文字颜色 | |
deleteTip | Boolean | true | 删除图片时是否提示是否删除 | |
join | Boolean | true | 当上传多张时,是否使用逗号join。如果是false则modelValue是Array |
upload image methods
方法名称 | 参数 | 返回值 | 说明 | 版本 |
---|---|---|---|---|
change | (value) => void | String | Array | 上传图片后回调 |