成都网站建设设计

将想法与焦点和您一起共享

创新互联百度小程序教程: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
     
     
     
    1. {{item.titleBar}}
    2. picture-container-class="image-uploader-container"
    3. picture-item-class="image-uploader-item"
    4. theme="{{item.theme}}"
    5. data-index="{{index}}"
    6. bind:chooseimage="chooseImage"
    7. bind:delimage="delImage"
    8. picture-list="{{item.images}}"
    9. picture-limit="{{item.pictureLimit}}"
    10. picture-select-limit="{{item.pictureSelectLimit}}"
    11. showTips="true"/>
    12. 沉浸式主题

    设计指南

    上传图片个数上限(pictureLimit),和从本地相册中选择图片个数(pictureSelectLimit)需保持一致;
    自定义图片上传器主题(theme)时,若图片类型为卡片或证照,建议使用大图模式。

    正确

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

    错误

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


    当前名称:创新互联百度小程序教程:image-uploader图片上传器
    网页地址:https://chengdu.cdxwcx.cn/article/dhpophs.html