IkUploadImage 图片上传组件
遵循新版UI规范,支持上传中、已上传、上传错误等多种状态
Props
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
action | 上传地址 | String | - | '' |
limit | 最多上传图片数量 | Number | - | 5 |
size | 单张图片大小 MB | Number | - | 50 |
accept | 允许的图片格式 image/* 或者 image/png, image/jpeg 或者.png, .jpg, .jpeg格式都可以 | String | - | "image/*" |
fit | 图片填充方式 | String | "contain" | "fill" | "cover" | "none" | "scale-down" | 'contain' |
preview | 预览模式 - 为true时不显示上传元素 | Boolean | - | false |
multiple | 支持多选 | Boolean | - | true |
tip | 显示提示 | Boolean | - | false |
tipText | 提示文字 | String | - | '' |
modelValue | 回显列表数据格式: [{url: ''}, {url: ''}] | Array as PropType< Array<{ url: string } | UploadFile> > | - | [] |
插槽
名称 | 描述 |
---|---|
trigger | 触发文件选择框的内容 |
事件
名称 | 说明 | 携带参数 |
---|---|---|
success | 上传图片成功后触发 | (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => void |
delete | 移除图片后触发 | (file) => void |
示例代码
vue
<template>
<!-- 示例 -->
<IkUploadImage :action="action" @success="handleSuccess" />
</template>