小程序實現選擇圖片九宮格源碼資源

時間 2019-11-13

標籤程序實現選擇圖片九宮源碼資源简体版

原文原文鏈接

今天給你們帶來小程序實現選擇圖片九宮格開發源碼資源：html

效果圖數據：依賴接口wx.upload、chooseImage與preview 數據請求經過LeanCloud完成圖片選擇：https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html#wxchooseimageobject前端處理：1.保存images數組爲 ...前端

效果圖

數據：

依賴接口wx.upload、chooseImage與preview 數據請求經過LeanCloud完成git

圖片選擇：

https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html#wxchooseimageobject小程序

前端處理：

1.保存images數組爲已選擇圖片 2.選擇了更多圖片後concat數組 3.預覽圖集 4.leancloud上傳多圖，目測順序一致api

js代碼

const AV = require('../../../utils/av-weapp.js')
var that;
Page({
    data: {
        images: [],
        uploadedImages: [],
        imageWidth: getApp().screenWidth / 4 - 10
    },
    onLoad: function (options) {
        that = this;
        var objectId = options.objectId;
        console.log(objectId);
    },
    chooseImage: function () {
        // 選擇圖片
        wx.chooseImage({
            sizeType: ['compressed'], 
            sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有
            success: function (res) {
                // 返回選定照片的本地文件路徑列表，tempFilePath能夠做爲img標籤的src屬性顯示圖片
                var tempFilePaths = res.tempFilePaths;
                console.log(tempFilePaths);
                that.setData({
                    images: that.data.images.concat(tempFilePaths)
                });
            }
        })
    },
    previewImage: function () {
        // 預覽圖集
        wx.previewImage({
            urls: that.data.images
        });
    },
    submit: function () {
        // 提交圖片，事先遍歷圖集數組
        that.data.images.forEach(function (tempFilePath) {
            new AV.File('file-name', {
                blob: {
                    uri: tempFilePath,
                },
            }).save().then(
                // file => console.log(file.url())
                function(file) {
                    // 先讀取
                    var uploadedImages = that.data.uploadedImages;
                    uploadedImages.push(file.url());
                    // 再寫入
                    that.setData({
                        uploadedImages: uploadedImages
                    });
                    console.log(uploadedImages);
                }
            ).catch(console.error);
        });
        wx.showToast({
            title: '評價成功',
            success: function () {
                wx.navigateBack();
            }
        });
    },
    delete: function (e) {
        var index = e.currentTarget.dataset.index;
        var images = that.data.images;
        images.splice(index, 1);
        that.setData({
            images: images
        });
    }
})

wxml代碼

<view class="gallery">
    <view class="item" wx:for="{{images}}" wx:key="">
        <image style="width: {{imageWidth}}px; height: {{imageWidth}}px" src=" {{item}}" bindtap="previewImage" mode="aspectFill" />
        <!-- 刪除按鈕 -->
        <view class="delete" bindtap="delete" data-index="{{index}}"><image style="left: {{imageWidth / 2 - 10}}px;" src="/images/icon_delete.png" /></view>
    </view>
    <view class="item">
        <image style="width: {{imageWidth}}px; height: {{imageWidth}}px" src="/images/icon_add.png" class="button-upload" bindtap="chooseImage" />
    </view>
</view>
<button type="primary" bindtap="submit">提交</button>

wxss代碼

/*畫廊*/
.gallery {
    /*margin-bottom: 100rpx;*/
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

/*每張圖片所佔容器*/
.item {
    position: relative;
    margin: 5px;
}

/*刪除按鈕*/
.delete {
    position: absolute;
    height: 20px;
    bottom: 0;
    width: 100%;
    background: #ccc;
    opacity: .8;
}

.delete image {
    position: absolute;
    width: 20px;
    height: 20px;
}

源碼下載：http://git.oschina.net/dotton/lendoo-wx，本文涉及代碼存於/pages/member/evalute文件夾中。數組