- image-uploader 图片上传器
- 属性说明
- 示例
- 代码示例
- 代码示例
image-uploader 图片上传器
解释：上传图片组件，支持大图、多图模式，可配置图片个数、大小限制等。
属性说明
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
|
theme |
String |
否 |
default |
主题：default 为小图，large 为大图模式 |
|
pictureList |
Array |
否 |
[] |
上传图片地址列表 |
|
pictureLimit |
Number |
否 |
9 |
上传图片个数上限 |
|
showPreview |
Boolean |
否 |
false |
是否支持预览 |
|
showTips |
Boolean |
否 |
false |
是否展示提示信息 |
|
pictureSizeLimit |
Number |
否 |
1e7 |
单张图片大小限制 |
|
pictureSelectLimit |
Number |
否 |
2 |
从本地相册中选择图片个数 |
|
picture-container-class |
String |
否 |
整个容器的外部样式 |
|
|
picture-area-class |
String |
否 |
放置图片缩略图区域的外部样式 |
|
|
close-class |
String |
否 |
清除按钮的外部样式 |
|
|
tips-class |
String |
否 |
每个图片信息的外部样式 |
|
|
tips-area-class |
String |
否 |
校验失败提示的外部样式 |
|
|
picture-item-class |
String |
否 |
每个图片的外部样式 |
|
|
add-picture-class |
String |
否 |
添加按钮的外部样式 |
|
|
delimage |
EventHandle |
否 |
删除图片，触发的绑定事件 |
|
|
chooseimage |
EventHandle |
否 |
选择图片，触发的绑定事件 |
示例
跳转编辑工具
在开发者工具中打开
在 WEB IDE 中打开
扫码体验
代码示例
请使用百度APP扫码
代码示例
- SWAN
- JS
- CSS
- JSON
<view class="wrap {{theme}}"><view class="card-panel" s-for="item,index in list"><view class="mode-title"><view class="mode-title-line-left"></view><view class="mode-title-text">{{item.titleBar}}</view><view class="mode-title-line-right"></view></view><view class="smt-card-area"><smt-image-uploaderpicture-container-class="image-uploader-container"picture-item-class="image-uploader-item"theme="{{item.theme}}"data-index="{{index}}"bind:chooseimage="chooseImage"bind:delimage="delImage"picture-list="{{item.images}}"picture-limit="{{item.pictureLimit}}"picture-select-limit="{{item.pictureSelectLimit}}"showTips="true"/></view></view><view class="smt-card-config"><view class="item-scroll"><text class="switch-text switch-text-before">沉浸式主题</text><switch color="{{theme ==='dark' ? '#f5f5f5' : '#ddd'}}" class="init-switch" disabled="false" bind:change="changeTheme"></switch></view></view></view>
设计指南
上传图片个数上限（pictureLimit），和从本地相册中选择图片个数（pictureSelectLimit）需保持一致；
自定义图片上传器主题（theme）时，若图片类型为卡片或证照，建议使用大图模式。
正确
上传证照素材时使用大图模式，图片清晰完整
错误
上传证照素材时使用小图模式，图片展示不全，影响识别
