小程序模板網(wǎng)

黃秀杰--小程序?qū)崿F(xiàn)選擇圖片九宮格帶預(yù)覽

發(fā)布時(shí)間:2018-04-21 08:55 所屬欄目:小程序開(kāi)發(fā)教程

效果圖

數(shù)據(jù):

依賴接口wx.upload、chooseImage與preview 數(shù)據(jù)請(qǐng)求通過(guò)LeanCloud完成

圖片選擇:

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

前端處理:

1.保存images數(shù)組為已選擇圖片 2.選擇了更多圖片后concat數(shù)組 3.預(yù)覽圖集 4.leancloud上傳多圖,目測(cè)順序一致

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'], // 可以指定來(lái)源是相冊(cè)還是相機(jī),默認(rèn)二者都有
            success: function (res) {
                // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
                var tempFilePaths = res.tempFilePaths;
                console.log(tempFilePaths);
                that.setData({
                    images: that.data.images.concat(tempFilePaths)
                });
            }
        })
    },
    previewImage: function () {
        // 預(yù)覽圖集
        wx.previewImage({
            urls: that.data.images
        });
    },
    submit: function () {
        // 提交圖片,事先遍歷圖集數(shù)組
        that.data.images.forEach(function (tempFilePath) {
            new AV.File('file-name', {
                blob: {
                    uri: tempFilePath,
                },
            }).save().then(
                // file => console.log(file.url())


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/23815.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢