小程序实现选择图片九宫格源码资源

最新推荐文章于 2023-12-06 10:32:57 发布

第九程序

最新推荐文章于 2023-12-06 10:32:57 发布

阅读量5.5k

点赞数 1

分类专栏：微信小程序微信小程序开发文章标签：小程序开发文档微信小程序开发

本文链接：https://blog.csdn.net/qq_38125123/article/details/73571965

版权

本文提供小程序实现选择图片九宫格的开发源码资源，利用微信小程序的wx.upload、chooseImage和preview接口，结合LeanCloud进行数据请求。前端通过处理images数组来展示图片。

摘要由CSDN通过智能技术生成

今天给大家带来小程序实现选择图片九宫格开发源码资源：

效果图数据：依赖接口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完成

图片选择：

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

前端处理：

1.保存images数组为已选择图片 2.选择了更多图片后concat数组 3.预览图集 4.leancloud上传多图，目测顺序一致

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 (<