微信小程序图片上传组件

https://gitee.com/httpchc320321/weUI.git
源码地址

gif效果图，加载需要一丢丢时间

功能介绍
1.点击+框,选择并展示所选图片
2点击×删除对应图片
3.右上角0/9看到没,最多选择9张
4.点击图片放大预览,并可左右滑动切换

介绍完毕,下面

开始表演.jpg

先来介绍一下各项数据

Page({
    data: {
          uploaderList: [],
          uploaderNum:0,
          showUpload:true
    }
})

uploaderList:已选择的图片临时路径数组

uploaderNum:已选择图片个数

showUpload:用来判断是否可继续选择图片,当传至9张时不可继续上传

界面布局

根据已选择的图片临时路径数组展示图片wx:for="{{uploaderList}}"
删除icon上挂载data数据用来删除指定图片data-index="{{index}}"
图片上挂载data数据用来点击放大展示图片data-index="{{index}}"
根据已选图片个数判断是否可继续上传wx:if="{{showUpload}}"

逻辑处理

//index.js
//获取应用实例
const app = getApp()
Page({
    data: {
        uploaderList: [],
        uploaderNum:0,
        showUpload:true
    },
    // 删除图片
    clearImg:function(e){
        var nowList = [];//新数据
        var uploaderList = this.data.uploaderList;//原数据
        
        for (let i = 0; i < uploaderList.length;i++){
            if (i == e.currentTarget.dataset.index){
                continue;
            }else{
                nowList.push(uploaderList[i])
            }
        }
        this.setData({
            uploaderNum: this.data.uploaderNum - 1,
            uploaderList: nowList,
            showUpload: true
        })
    },
    //展示图片
    showImg:function(e){
        var that=this;
        wx.previewImage({
            urls: that.data.uploaderList,
            current: that.data.uploaderList[e.currentTarget.dataset.index]
        })
    },
    //上传图片
    upload: function(e) {
        var that = this;
        wx.chooseImage({
            count: 9 - that.data.uploaderNum, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function(res) {
                console.log(res)
                // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                let tempFilePaths = res.tempFilePaths;
                let uploaderList = that.data.uploaderList.concat(tempFilePaths);
                if (uploaderList.length==9){
                    that.setData({
                        showUpload:false
                    })
                }
                that.setData({
                    uploaderList: uploaderList,
                    uploaderNum: uploaderList.length,
                })
            }
        })
    },
    onLoad: function() {}
})

偷了个懒,不想代码一一讲解,写了简单注释,有好的建议或者不懂的地方欢迎留言哦~~~

那么,有缘再见

分手吧.jpg