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-uploader 
                picture-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）时，若图片类型为卡片或证照，建议使用大图模式。

正确

上传证照素材时使用大图模式，图片清晰完整

错误

上传证照素材时使用小图模式，图片展示不全，影响识别