后浪云百度小程序教程：swan.chooseImage

2021-11-17
  • swan.chooseImage
    • 方法参数
      • object 参数说明
      • success 返回参数说明
      • tempFiles 对象结构如下
    • 示例
      • 图片示例
      • 代码示例 1：tempFilePaths
      • 代码示例 2：tempFiles
    • Bug & Tip
    • 错误码
      • Android
      • iOS

    swan.chooseImage

    解释：从本地相册选择图片或使用相机拍照。上传图片界面设计可直接使用 Smart UI 组件，详见 image-uploader 图片上传器。

    方法参数

    Object object

    object 参数说明

    属性名 类型 必填 默认值 说明

    count

    Number

    否

    9

    最多可以选择的图片张数

    sizeType

    Array.<string>

    否

    original 原图，compressed 压缩图，默认二者都有

    sourceType

    Array.<string>

    否

    album 从相册选图，camera 使用相机，默认二者都有

    success

    Function

    否

    成功则返回图片的本地文件路径列表 tempFilePaths

    fail

    Function

    否

    接口调用失败的回调函数

    complete

    Function

    否

    接口调用结束的回调函数（调用成功、失败都会执行）

    success 返回参数说明

    参数 类型 说明 Web 态说明

    tempFilePaths

    Array.<string>

    图片的本地文件路径列表

    Web 态值为浏览器所支持的 blob URL 数组，形如 [“blob:https://xxx“]

    tempFiles

    Array.<object>

    图片的本地文件列表，每一项是一个 File 对象

    		 -

    tempFiles 对象结构如下

    字段 类型 说明 Web 态说明

    path

    String

    本地文件路径

    Web 态值为浏览器所支持的 blob URL 数组，示例 “blob:https://9zs64x.smartapps.cn/52f855e3-2d9d-49b5-aeb4-96534135f0a9“

    size

    Number

    本地文件大小（单位：B）

    		 -

    示例

    扫码体验

    代码示例

    后浪云百度小程序教程：swan.chooseImage插图

    请使用百度APP扫码

    图片示例

    后浪云百度小程序教程：swan.chooseImage插图1

    代码示例 1：tempFilePaths

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    • SWAN
    • JS
     
 
 
      
  
  
  
    1. <view class="wrap">
      2. 
  
  
  
    2.  <view class="card-area">
      3. 
  
  
  
    3.  <view s-if="{{imageList.length > 0}}" class="image-container" style="height: {{imageList.length > 6 ? '3.54' : '2.55'}}rem;">
      4. 
  
  
  
    4.  <image s-for="image in imageList" class="image-items" style="height: {{imageList.length > 6 ? '32' : '49'}}%;" src="{{image}}" mode="scaleToFill" data-src="{{image}}" bindtap="previewImage"></image>
      5. 
  
  
  
    5.  </view>
      6. 
  
  
  
    6.  <view s-else class="display-area">
      7. 
  
  
  
    7.  图片显示区
      8. 
  
  
  
    8.  </view>
      9. 
  
  
  
    9.  <view class="middle-area border-top">
      10. 
  
  
  
    10.  <view class="list-area border-bottom" hover-class="option-active">
      11. 
  
  
  
    11.  <text class="list-item-key-4">图片来源</text>
      12. 
  
  
  
    12.  <picker class="list-item-value" mode="selector" value="{{sourceIndex}}" range="{{sourceArray}}" bind:change="sourceChange">
      13. 
  
  
  
    13.  <view hover-class="hover">{{sourceArray[sourceIndex]}}</view>
      14. 
  
  
  
    14.  </picker>
      15. 
  
  
  
    15.  </view>
      16. 
  
  
  
    16.  <view class="list-area border-bottom" hover-class="option-active">
      17. 
  
  
  
    17.  <text class="list-item-key-4">图片质量</text>
      18. 
  
  
  
    18.  <picker class="list-item-value" mode="selector" value="{{sizeIndex}}" range="{{sizeArray}}" bind:change="sizeChange">
      19. 
  
  
  
    19.  <view hover-class="hover">{{sizeArray[sizeIndex]}}</view>
      20. 
  
  
  
    20.  </picker>
      21. 
  
  
  
    21.  </view>
      22. 
  
  
  
    22.  <view class="list-area border-bottom" hover-class="option-active">
      23. 
  
  
  
    23.  <text class="list-item-key-4">图片数量</text>
      24. 
  
  
  
    24.  <picker class="list-item-value" mode="selector" value="{{countIndex}}" range="{{countArray}}" bind:change="countChange">
      25. 
  
  
  
    25.  <view hover-class="hover">{{countArray[countIndex]}}</view>
      26. 
  
  
  
    26.  </picker>
      27. 
  
  
  
    27.  </view>
      28. 
  
  
  
    28.  </view>
      29. 
  
  
  
    29.  <view class="button-group">
      30. 
  
  
  
    30.  <button type="primary" bindtap="selectImage">添加图片</button>
      31. 
  
  
  
    31.  <button type="default" bindtap="clearImage">清空图片</button>
      32. 
  
  
  
    32.  </view>
      33. 
  
  
  
    33.  </view>
      34. 
  
  
  
    34. </view>
      35.

    代码示例 2：tempFiles

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    • SWAN
    • JS
     
 
 
      
  
  
  
    1. <view class="wrap">
      2. 
  
  
  
    2.  <view class="card-area">
      3. 
  
  
  
    3.  <view s-if="{{imageList.length > 0}}" class="image-container" style="height: {{imageList.length > 6 ? '3.54' : '2.55'}}rem;">
      4. 
  
  
  
    4.  <image s-for="image in imageList" class="image-items" style="height: {{imageList.length > 6 ? '32' : '49'}}%;" src="{{image}}" mode="scaleToFill" data-src="{{image}}" bindtap="previewImage"></image>
      5. 
  
  
  
    5.  </view>
      6. 
  
  
  
    6.  <view s-else class="display-area">
      7. 
  
  
  
    7.  图片显示区
      8. 
  
  
  
    8.  </view>
      9. 
  
  
  
    9.  <view class="middle-area border-top">
      10. 
  
  
  
    10.  <view class="list-area border-bottom" hover-class="option-active">
      11. 
  
  
  
    11.  <text class="list-item-key-4">图片来源</text>
      12. 
  
  
  
    12.  <picker class="list-item-value" mode="selector" value="{{sourceIndex}}" range="{{sourceArray}}" bind:change="sourceChange">
      13. 
  
  
  
    13.  <view hover-class="hover">{{sourceArray[sourceIndex]}}</view>
      14. 
  
  
  
    14.  </picker>
      15. 
  
  
  
    15.  </view>
      16. 
  
  
  
    16.  <view class="list-area border-bottom" hover-class="option-active">
      17. 
  
  
  
    17.  <text class="list-item-key-4">图片质量</text>
      18. 
  
  
  
    18.  <picker class="list-item-value" mode="selector" value="{{sizeIndex}}" range="{{sizeArray}}" bind:change="sizeChange">
      19. 
  
  
  
    19.  <view hover-class="hover">{{sizeArray[sizeIndex]}}</view>
      20. 
  
  
  
    20.  </picker>
      21. 
  
  
  
    21.  </view>
      22. 
  
  
  
    22.  <view class="list-area border-bottom" hover-class="option-active">
      23. 
  
  
  
    23.  <text class="list-item-key-4">图片数量</text>
      24. 
  
  
  
    24.  <picker class="list-item-value" mode="selector" value="{{countIndex}}" range="{{countArray}}" bind:change="countChange">
      25. 
  
  
  
    25.  <view hover-class="hover">{{countArray[countIndex]}}</view>
      26. 
  
  
  
    26.  </picker>
      27. 
  
  
  
    27.  </view>
      28. 
  
  
  
    28.  </view>
      29. 
  
  
  
    29.  <view class="button-group">
      30. 
  
  
  
    30.  <button type="primary" bindtap="selectImage">添加图片</button>
      31. 
  
  
  
    31.  <button type="default" bindtap="clearImage">清空图片</button>
      32. 
  
  
  
    32.  </view>
      33. 
  
  
  
    33.  </view>
      34. 
  
  
  
    34. </view>
      35.

    Bug & Tip

    • Tip：文件的临时路径，在智能小程序本次启动期间可以正常使用，如需持久保存，需在主动调用 swan.saveFile ，在智能小程序下次启动时才能访问得到。
    • Tip：在 Web 态内，文件的临时路径仅在浏览器关闭前有效。受浏览器限制，在 Web 态无法使用 swan.saveFile 在本地持久保存文件。
    • Tip：在 Web 态内，调用 chooseImage 方法，然后取消选择或者手动返回上一个页面，并不会触发 fail 回调函数。

    错误码

    Android

    错误码 说明

    202

    解析失败，请检查参数是否正确

    1002

    用户取消操作错误码

    iOS

    错误码 说明

    202

    解析失败，请检查参数是否正确

    1002

    用户取消操作错误码

    1003

    用户没有授权百度使用相册
    版权声明：
    作者：后浪云
    链接：https://www.idc.net/help/186588/
    文章版权归作者所有，未经允许请勿转载。
    THE END
    IDC.NET智能小程序后浪云百度小程序
    Copyright © 2025 后浪云 网站地图