欢迎光临
我们一直在努力

九八云百度小程序教程:swan.chooseAlbum

  • swan.chooseAlbum
    • 方法参数
      • object 参数说明
      • success 返回参数说明
      • tempFiles 对象结构如下
    • 示例
      • 图片示例
      • 代码示例
    • Bug & Tip

    swan.chooseAlbum

    基础库 3.30.3 开始支持,低版本需做兼容处理

    解释:打开本地相册,相册内可以同时包含图片和视频。

    方法参数

    Object object

    object 参数说明

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

    count

    Number

    9

    最多可以选择的图片/视频数量

    mode

    String

    single

    打开相册后可选择资源类型设置, 可选择模式为: single/both; single: 打开相册后只能选择图片或视频; both: 打开相册后,可以同时选择图片和视频

    compressed

    Boolean

    true

    是否压缩所选的视频源文件,需要压缩

    success

    Function

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

    fail

    Function

    接口调用失败的回调函数

    complete

    Function

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

    success 返回参数说明

    参数 类型 说明

    tempFilePaths

    Array.<string>

    选择资源(图片或视频)的本地文件路径列表

    tempFiles

    Array.<object>

    选择资源(图片或视频)本地文件列表,每一项是一个 File 对象

    tempFiles 对象结构如下

    字段 类型 说明

    path

    String

    本地文件路径

    size

    Number

    本地文件大小(单位:B)

    type

    文件类型

    有效值:video、image (注:基础库 3.190.3 之前在选择资源为图片时 type 值返回 image 或 photo, 3.190.3 之后返回 image,低版本需做兼容处理)

    duration

    Number

    选定视频的时间长度 (单位:s); 开发者工具暂不支持

    示例

    跳转编辑工具

    在开发者工具中打开

    在 WEB IDE 中打开

    扫码体验

    代码示例

    请使用百度APP扫码

    图片示例

    代码示例

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

    Bug & Tip

    文件的临时路径,在智能小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 swan.saveFile,在智能小程序下次启动时才能访问得到。

    未经允许不得转载:九八云安全 » 九八云百度小程序教程:swan.chooseAlbum