前言：

　　小程式裡面上傳照片，可以刪除，可以放大檢視，最多上傳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

本文來自部落格園，作者：_小狐狸，轉載請註明原文連結：https://www.cnblogs.com/zwh520/p/15127787.html