百度智能小程序 選擇圖片或使用相機(jī)拍照

swan.chooseImage

解釋：從本地相冊(cè)選擇圖片或使用相機(jī)拍照。

方法參數(shù)

Object object

object 參數(shù)說(shuō)明

success 返回參數(shù)說(shuō)明

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

示例

圖片示例

代碼示例 1：tempFilePaths 

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

<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">
            圖片顯示區(qū)
        </view>
        <view class="middle-area border-top">
            <view class="list-area border-bottom" hover-class="option-active">
                <text class="list-item-key-4">圖片來(lái)源</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">圖片質(zhì)量</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">清空?qǐng)D片</button>
        </view>
    </view>
</view>

Page({
    data: {
        sourceIndex: 2,
        sourceArray: ['拍照', '相冊(cè)', '拍照或相冊(cè)'],
        sizeIndex: 2,
        sizeArray: ['壓縮', '原圖', '壓縮或原圖'],
        countIndex: 0,
        countArray: [],
        imageList: []
    },
    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 === 2) {
            swan.showActionSheet({
                itemList: ['拍照', '相冊(cè)'],
                success: res => {
                    const sourceType = res.tapIndex === 0 ? 'camera' : 'album';
                    this.chooseImage(sourceType, count);
                }
            });
        } else {
            const sourceType = sourceIndex === 0 ? 'camera' : 'album';
            this.chooseImage(sourceType, count);
        }
    },
    chooseImage(sourceType, count) {
        const sizeIndex = this.data.sizeIndex;
        let sizeType = ['compressed', 'original'];
        if (sizeIndex === 0) {
            sizeType = ['compressed'];
        } else if (sizeIndex === 1) {
            sizeType = ['original'];
        }

        swan.chooseImage({
            count,
            sizeType,
            sourceType: [sourceType],
            success: res => {
                this.setData('imageList', res.tempFilePaths);
                console.log('res.tempFilePaths', res.tempFilePaths);
            },
            fail: err => {
                console.log('chooseImage fail', err);
            }
        });
    },
    clearImage() {
        const imageList = this.data.imageList;
        if (imageList.length > 0) {
            this.setData('imageList', []);
            swan.showToast({title: '清空?qǐng)D片成功'});
        } else {
            swan.showToast({title: '無(wú)可清空?qǐng)D片', icon: 'none'});
        }
    },
    previewImage(e) {
        swan.showToast({title: '暫不支持預(yù)覽', icon: 'none'});
    }
});

代碼示例 2：tempFiles 

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

<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">
            圖片顯示區(qū)
        </view>
        <view class="middle-area border-top">
            <view class="list-area border-bottom" hover-class="option-active">
                <text class="list-item-key-4">圖片來(lái)源</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">圖片質(zhì)量</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">清空?qǐng)D片</button>
        </view>
    </view>
</view>

Page({
    data: {
        sourceIndex: 2,
        sourceArray: ['拍照', '相冊(cè)', '拍照或相冊(cè)'],
        sizeIndex: 2,
        sizeArray: ['壓縮', '原圖', '壓縮或原圖'],
        countIndex: 0,
        countArray: [],
        imageList: []
    },
    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 === 2) {
            swan.showActionSheet({
                itemList: ['拍照', '相冊(cè)'],
                success: res => {
                    const sourceType = res.tapIndex === 0 ? 'camera' : 'album';
                    this.chooseImage(sourceType, count);
                }
            });
        } else {
            const sourceType = sourceIndex === 0 ? 'camera' : 'album';
            this.chooseImage(sourceType, count);
        }
    },
    chooseImage(sourceType, count) {
        const sizeIndex = this.data.sizeIndex;
        let sizeType = ['compressed', 'original'];
        if (sizeIndex === 0) {
            sizeType = ['compressed'];
        } else if (sizeIndex === 1) {
            sizeType = ['original'];
        }

        swan.chooseImage({
            count,
            sizeType,
            sourceType: [sourceType],
            success: res => {
                console.log('res.tempFiles',res.tempFiles);
                let imageList = [];
                res.tempFiles.forEach((e)=>{ 
                    imageList.push(e.path)
                })
                this.setData('imageList', imageList);
            },
            fail: err => {
                console.log('chooseImage fail', err);
            }
        });
    },
    clearImage() {
        const imageList = this.data.imageList;
        if (imageList.length > 0) {
            this.setData('imageList', []);
            swan.showToast({title: '清空?qǐng)D片成功'});
        } else {
            swan.showToast({title: '無(wú)可清空?qǐng)D片', icon: 'none'});
        }
    },
    previewImage(e) {
        swan.showToast({title: '暫不支持預(yù)覽', icon: 'none'});
    }
});

Bug & Tip

• 文件的臨時(shí)路徑，在智能小程序本次啟動(dòng)期間可以正常使用，如需持久保存，需在主動(dòng)調(diào)用 swan.saveFile ，在智能小程序下次啟動(dòng)時(shí)才能訪問(wèn)得到。
• 在 Web 態(tài)內(nèi)，文件的臨時(shí)路徑僅在瀏覽器關(guān)閉前有效。受瀏覽器限制，在 Web 態(tài)無(wú)法使用 swan.saveFile 在本地持久保存文件。
• 在 Web 態(tài)內(nèi)，調(diào)用 chooseImage 方法，然后取消選擇或者手動(dòng)返回上一個(gè)頁(yè)面，并不會(huì)觸發(fā) fail 回調(diào)函數(shù)。

錯(cuò)誤碼

Android

iOS