自贡网站建设公司

创新互联百度小程序教程：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
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  
      5. 
  
  
  
    5.  {{item.titleBar}}
      6. 
  
  
  
    6.  
      7. 
  
  
  
    7.  
      8. 
  
  
  
    8.  
      9. 
  
  
  
    9.  
      10. 
  
  
  
    10.  picture-container-class="image-uploader-container"
      11. 
  
  
  
    11.  picture-item-class="image-uploader-item"
      12. 
  
  
  
    12.  theme="{{item.theme}}"
      13. 
  
  
  
    13.  data-index="{{index}}"
      14. 
  
  
  
    14.  bind:chooseimage="chooseImage"
      15. 
  
  
  
    15.  bind:delimage="delImage"
      16. 
  
  
  
    16.  picture-list="{{item.images}}"
      17. 
  
  
  
    17.  picture-limit="{{item.pictureLimit}}"
      18. 
  
  
  
    18.  picture-select-limit="{{item.pictureSelectLimit}}"
      19. 
  
  
  
    19.  showTips="true"/>
      20. 
  
  
  
    20.  
      21. 
  
  
  
    21.  
      22. 
  
  
  
    22.  
      23. 
  
  
  
    23.  
      24. 
  
  
  
    24.  沉浸式主题
      25. 
  
  
  
    25.  
      26. 
  
  
  
    26.  
      27. 
  
  
  
    27.  
      28. 
  
  
  
      29.

    设计指南

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

    正确

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

    错误

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


    当前标题：创新互联百度小程序教程：image-uploader图片上传器
    网站地址：http://jxruijie.cn/article/dhpophs.html

    其他资讯