后浪云百度小程序教程：image-uploader 图片上传器
- 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）时，若图片类型为卡片或证照，建议使用大图模式。
正确
上传证照素材时使用大图模式，图片清晰完整
错误
上传证照素材时使用小图模式，图片展示不全，影响识别