小程序上传图片，放大，删除。

前言： 

　　小程序里面上传照片，可以删除，可以放大查看，最多上传8张（张数限制可以自己修改）

 

上代码：

    <!-- 上传照片  star -->
    <view class="ops ops_img">
        <view class="ops_title">照片（限制上传8张）</view>
        <!-- 图片上传列表 star -->
        <view class="img">
            <view class="img_list" wx:for="{{img_list}}"  wx:for-item="item" wx:key="*this" >
                <image  data-index="{{index}}"  src="{{item}}" class="tupian" mode="aspectFit" bindtap="tupian"></image>
                <image  data-index="{{index}}"  src="../../images/delete.png" class="close" catchtap="del"></image>
            </view>
            <image src="../../images/picture01.png" class="upload {{picture == 0 ? 'show' :'hide'}}" bindtap="upload" ></image>
        </view>
        <!-- 图片上传列表 end -->
    </view>
    <!-- 上传照片  end -->

.ops_img{
    margin-bottom: 40rpx;
}
.img{
    height: auto;
    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
}
.img_list{
    position: relative;
    width: 140rpx;
    height: 140rpx;
    float: left;
    margin-top: 20rpx;
    margin-bottom: 0rpx;
    border-radius: 15rpx;
}
.tupian{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.close{
    width: 30rpx;
    height: 26rpx;
    position: absolute;
    right: 0;
    top: 0;
}

Page({

    /**
     * 页面的初始数据
     */
    data: {
        img_list:[],
        lenMore:0,
        picture:0

    },// 上传照片
    upload:function(){
        let $this = this;
        let $imglist = $this.data.img_list;
        if($imglist.length >=8 ){
            wx.showToast({
                title: '最多上传8张',
                icon: 'error',
                duration: 2000
              })
        }else{
            wx.chooseImage({
                // count: 1, // 默认8
                count: 1,
                sizeType: ['original', 'compressed'],  // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'],     // 可以指定来源是相册还是相机，默认二者都有
                success (res) {
                    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                    let tempFilePaths = res.tempFilePaths;
                    let $imglist = $this.data.img_list;
                    for (var i = 0; i < tempFilePaths.length; i++) {
                        $imglist.push(tempFilePaths[i]);
                    }
                    $this.setData({
                        img_list: $imglist
                    });
            
                }
            })
    
        }

    },
    //预览大图
    tupian:function(e){
        //获取当前图片的下标
        let $index = e.currentTarget.dataset.index;
        //所有图片
        let $imglist = this.data.img_list;
        console.info($index,$imglist[$index])
        wx.previewImage({
            //当前显示图片
            current: $imglist[$index],
            //所有图片
            urls: $imglist
          })

    },
    //删除图片
    del:function(e){
        let  $imglist = this.data.img_list;
        let  index = e.currentTarget.dataset.index;
        $imglist.splice(index, 1);
        this.setData({
            img_list: $imglist
        });
    }



})

 

注 ： 本文参考链接 ： https://blog.csdn.net/anLazyAnt/article/details/77374905