百度智能小程序 打開本地相冊

swan.chooseAlbum

基礎(chǔ)庫 3.30.3 開始支持，低版本需做兼容處理

解釋：打開本地相冊，相冊內(nèi)可以同時(shí)包含圖片和視頻。

方法參數(shù)

Object object

object 參數(shù)說明

success 返回參數(shù)說明

tempFiles 對象結(jié)構(gòu)如下

示例 

在開發(fā)者工具中打開

圖片示例

代碼示例

<view class="wrap">
    <view class="card-area">
        <video s-if="hasVideo" style="width: 100%;" id="myVideo" src="{{videoSrc}}" autoplay="true" bindended="videoEnd"></video>
        <view s-else>        
            <view s-if="{{imageList.length > 0}}" class="image-container" style="height: {{imageList.length > 6 ? '3.54' : '2.55'}}rem;">
                <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>
            </view>
            <view s-else class="display-area">
                圖片/視頻顯示區(qū)
            </view>
        </view>
        <view class="middle-area border-top border-bottom">
            <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">數(shù)量限制</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>

Page({
    data: {
        sourceIndex: 1,
        sourceArray: ['圖片或視頻', '圖片及視頻'],
        sizeIndex: 1,
        sizeArray: ['壓縮', '不壓縮'],
        countIndex: 0,
        countArray: [],
        imageList: [],
        videoSrc: '',
        hasVideo: false
    },
    onLoad(e) {
        const array = [];
        for (let i = 0; i < 9; i++) {
            array.push(i + 1);
        }
        this.setData({
            countIndex: array.length - 1,
            countArray: array
        });
    },
    sourceChange(e) {
        this.setData('sourceIndex', e.detail.value);
    },
    sizeChange(e) {
        this.setData('sizeIndex', e.detail.value);
    },
    countChange(e) {
        this.setData('countIndex', e.detail.value);
    },
    selectImage() {
        const sourceIndex = this.data.sourceIndex;
        const count = this.data.countIndex + 1;
        if (sourceIndex === 1) {
            const sourceType = 'both';
            this.chooseImage(sourceType, count);
        }
        else {
            const sourceType = 'single';
            this.chooseImage(sourceType, count);
        }
    },
    chooseImage(sourceType, count) {
        const sizeIndex = this.data.sizeIndex;
        let sizeType = [true, false];
        if (sizeIndex === 0) {
            sizeType = true;
        }
        else if (sizeIndex === 1) {
            sizeType = false;
        }

        swan.chooseAlbum({
            count: count,
            mode: sourceType,
            compressed: sizeType,
            success: res => {
                console.log('chooseAlbum success', res);
                let img = '';
                for (let i = 0; i < res.tempFiles.length; i++) {
                    if (res.tempFiles[i].type === 'video') {
                        res.tempFiles[i].videoSrc = res.tempFiles[i].path;
                        res.tempFiles[i].path = 'https://b.bdstatic.com/miniapp/image/default.png';
                    }

                    this.setData('imageList', res.tempFiles);
                    img = this.data.imageList;
                }
            },
            fail: err => {
                console.log('錯(cuò)誤碼：' + err.errCode);
                console.log('錯(cuò)誤信息：' + err.errMsg);
            }
        });
    },
    videoEnd() {
        this.setData({
            hasVideo: false
        });
    },
    upVideo(e) {
        let src = e.currentTarget.dataset.src;
        this.setData({
            hasVideo: true,
            videoSrc: src
        });
    },
    clearImage() {
        const imageList = this.data.imageList;
        if (imageList.length > 0) {
            this.setData({
                imageList: [],
                hasVideo: false
            });
            swan.showToast({
                title: '清空成功',
                icon: 'none'
            });
        }
        else {
            swan.showToast({title: '無可清空圖片', icon: 'none'});
        }
    },
    previewImage(e) {
        swan.showToast({title: '暫不支持預(yù)覽', icon: 'none'});
    }
});

Bug & Tip

• 文件的臨時(shí)路徑，在智能小程序本次啟動期間可以正常使用，如需持久保存，需在主動調(diào)用 swan.saveFile，在智能小程序下次啟動時(shí)才能訪問得到。