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>