解释:上传图片组件,支持大图、多图模式,可配置图片个数、大小限制等。

| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
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扫码
{{item.titleBar}} 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"/>沉浸式主题
设计指南
上传图片个数上限(pictureLimit),和从本地相册中选择图片个数(pictureSelectLimit)需保持一致;
自定义图片上传器主题(theme)时,若图片类型为卡片或证照,建议使用大图模式。
正确
上传证照素材时使用大图模式,图片清晰完整
错误
上传证照素材时使用小图模式,图片展示不全,影响识别