swan.chooseImage

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

方法参数

Object object

object 参数说明

success 返回参数说明

tempFiles 对象结构如下

示例

扫码体验

代码示例

请使用百度APP扫码

图片示例

代码示例 1：tempFilePaths

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

<view class="wrap">
    <view class="card-area">
        <view s-if="{{imageList.length > 0}}" class="image-container" style="height: {{imageList.length > 6 ? '3.54' : '2.55'}}rem;">
            <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>
        </view>
        <view s-else class="display-area">
            图片显示区
        </view>
        <view class="middle-area border-top">
            <view class="list-area border-bottom" hover-class="option-active">
                <text class="list-item-key-4">图片来源</text>
                <picker class="list-item-value" mode="selector" value="{{sourceIndex}}" range="{{sourceArray}}" bind:change="sourceChange">
                    <view hover-class="hover">{{sourceArray[sourceIndex]}}</view>
                </picker>
            </view>
            <view class="list-area border-bottom" hover-class="option-active">
                <text class="list-item-key-4">图片质量</text>
                <picker class="list-item-value" mode="selector" value="{{sizeIndex}}" range="{{sizeArray}}" bind:change="sizeChange">
                    <view hover-class="hover">{{sizeArray[sizeIndex]}}</view>
                </picker>
            </view>
            <view class="list-area border-bottom" hover-class="option-active">
                <text class="list-item-key-4">图片数量</text>
                <picker class="list-item-value" mode="selector" value="{{countIndex}}" range="{{countArray}}" bind:change="countChange">
                    <view hover-class="hover">{{countArray[countIndex]}}</view>
                </picker>
            </view>
        </view>
        <view class="button-group">
            <button type="primary" bindtap="selectImage">添加图片</button>
            <button type="default" bindtap="clearImage">清空图片</button>
        </view>
    </view>
</view>

代码示例 2：tempFiles

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

<view class="wrap">
    <view class="card-area">
        <view s-if="{{imageList.length > 0}}" class="image-container" style="height: {{imageList.length > 6 ? '3.54' : '2.55'}}rem;">
            <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>
        </view>
        <view s-else class="display-area">
            图片显示区
        </view>
        <view class="middle-area border-top">
            <view class="list-area border-bottom" hover-class="option-active">
                <text class="list-item-key-4">图片来源</text>
                <picker class="list-item-value" mode="selector" value="{{sourceIndex}}" range="{{sourceArray}}" bind:change="sourceChange">
                    <view hover-class="hover">{{sourceArray[sourceIndex]}}</view>
                </picker>
            </view>
            <view class="list-area border-bottom" hover-class="option-active">
                <text class="list-item-key-4">图片质量</text>
                <picker class="list-item-value" mode="selector" value="{{sizeIndex}}" range="{{sizeArray}}" bind:change="sizeChange">
                    <view hover-class="hover">{{sizeArray[sizeIndex]}}</view>
                </picker>
            </view>
            <view class="list-area border-bottom" hover-class="option-active">
                <text class="list-item-key-4">图片数量</text>
                <picker class="list-item-value" mode="selector" value="{{countIndex}}" range="{{countArray}}" bind:change="countChange">
                    <view hover-class="hover">{{countArray[countIndex]}}</view>
                </picker>
            </view>
        </view>
        <view class="button-group">
            <button type="primary" bindtap="selectImage">添加图片</button>
            <button type="default" bindtap="clearImage">清空图片</button>
        </view>
    </view>
</view>

Bug & Tip

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

错误码

Android

iOS