微信小程序图片上传组件

源码提取地址
链接：https://pan.baidu.com/s/161cYco2IKRrqNSNXfArPJQ
提取码：2y3p

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

先来介绍一下各项数据

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

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

uploaderNum:已选择图片个数

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

界面布局

<!-- 容器 -->
<view class='ui_uploader_cell'>
    <!-- 根据已选择的图片临时路径数组展示图片-->
    <view class='ui_uploader_item' wx:for="{{uploaderList}}" wx:key="{{index}}">
        <!-- 删除-->
        <icon class='ui_uploader_item_icon' bindtap='clearImg' data-index="{{index}}" type="clear" size="20" color="red"/>
        <!-- 图片-->
        <image bindtap='showImg' data-index="{{index}}" src='{{item}}'></image>
    </view>
    <!-- 上传按钮+框 -->
    <view class='ui_uploader' bindtap='upload' wx:if="{{showUpload}}"></view>
</view>

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

作者：两年半练习程序员
链接：https://www.jianshu.com/p/01eac095cf95
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

逻辑处理

//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() {}
})

偷了个懒,不想代码一一讲解,写了简单注释,有好的建议或者不懂的地方欢迎留言哦~~~
代码写之不易 领个红包支持一下吧 谢谢了！