Wechat applet uploads pictures (preview deletion limits the size and number of pictures)

//wxml

 <button class='button' bingtap="uploadSomeMsg"> Upload </button>    
          <view class="uploadImgBox">
            <view class='smallImgBox'>
              <block wx:for="{
     {img_arr}}" wx:key="index">
                <view class='logoinfo'>
                  <image class='logoinfo' mode="aspectFill" src='{
     {item}}' data-index="{
     {index}}" bindtap="previewImg" bindlongpress="deleteImg" name="headimage" ></image>
                </view>
              </block>
              <image bindtap='getLocalityImg' class='moreImg' src="../../images/uploadPictures.png">
              </image>
            </view>
            <view>
          </view> 
          </view>
     

//wxss .uploadImgBox {
    
  margin: 30rpx 0;
}

.logoinfo {
    
  height: 180rpx;
  width: 180rpx;
  margin: 10rpx ;
}

.smallImgBox {
    
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(2,180rpx);
  grid-gap:20rpx 10rpx;
}

.moreImg {
    
  border-radius: 10rpx;
  height: 180rpx;
  width: 180rpx;
  margin: 20rpx ;
}

.button{
      
 height: 90rpx;  
 width: 270rpx;  
 font-size: 38rpx;  
 background-color: rgba(146, 163, 45, 0.288);  
 font-weight: 600;  
 color: white;
 } 
 button::after {
    
  border: none;
} 

//js
Page({
    
  data: {
    
    img_arr: [], // Store an array of photos 
  },

//https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html  Wechat applet uploads files api
  // Upload pictures to the server  
  uploadSomeMsg() {
    
    var that = this
    var adds = that.data.img_arr;
    for (let i = 0; i < this.data.img_arr.length; i += 1) {
    
      wx.uploadFile({
    
        url:'https://example.weixin.qq.com/upload', // Just for the sample , Unreal interface address 
        filePath: that.data.img_arr[i],
        name: 'content',
        formData: {
    
          'user': adds
        },
        success: function (res) {
    
          console.log(res, " Upload pictures ")
          if (res) {
    
            wx.showToast({
    
              title: ' Submitted for publication ！',
              duration: 3000
            });
          }
        }
      })
    }
  },

  // Get photos locally  
  getLocalityImg() {
    
    let that = this;
    if (this.data.img_arr.length < 5) {
    
      wx.chooseImage({
    
        count: 5 - that.data.img_arr.length, // Number of uploaded pictures   When I uploaded some pictures before  , total  -  Number of uploaded  =  Remaining number  ( Limit the number of Uploads )
        sizeType: ['original', 'compressed'],  // You can specify the original or compressed graph , By default, both of them have 
        sourceType: ['album', 'camera'],        // Specify whether the picture is from a camera or an album , By default, both of them have 
     success(res) {
    
          console.log(res, "--------- Uploaded pictures ")

          const tempFiles = res.tempFiles // Contains an array of image sizes 

          let answer = tempFiles.every(item => {
       // Limit the size of uploaded pictures to 2M, All pictures are less than 2M To upload 
            return item.size <= 2000000
          })
    
          if (answer) {
    
            that.setData({
    
              img_arr: that.data.img_arr.concat(res.tempFilePaths),
            })
          }else{
    
                  wx.showToast({
    
                title:' Upload image cannot be larger than 2M!',
                icon:'none'    
            })
          }

        }
      })

    } else {
    
      wx.showToast({
      // Prompt when the number of pictures exceeds the limit 
        title: ' Upload up to five pictures ',
        icon: 'none',
        duration: 2000
      })

    }
  },



  // Delete photo function and preview photo function  
  deleteImg(e) {
    
    let that = this;
    let img_arr = that.data.img_arr;
    let index = e.currentTarget.dataset.index;  // Get long press to delete the picture index
    wx.showModal({
    
      title: ' Tips ',
      content: ' Are you sure you want to delete this picture ？',
      success(res) {
    
        if (res.confirm) {
    
          // console.log(' Click OK ');
          img_arr.splice(index, 1);
        } else if (res.cancel) {
    
          // console.log(' Click Cancel ');
          return false;
        }
        that.setData({
    
          img_arr: img_arr
        });
      }
    })
  },

  // The preview image 
  previewImg(e) {
    
    let index = e.currentTarget.dataset.index;
    let img_arr = this.data.img_arr;
    wx.previewImage({
    
      current: img_arr[index],
      urls: img_arr
    })
  },


})

# convert to base64 Format

//1__ Convert local uploaded pictures 

// If you need to upload base64 Format image to back end , You can do this when uploading pictures , Others are the same as uploading data through ordinary interfaces 
          // Conversion result 
        let data=wx.getFileSystemManager().readFileSync(res.tempFilePaths[0], "base64") 
//`data:image/png;base64,${data}`
// When uploading, you only need to add a before the conversion result : `data:image/png;base64,${data}` , Is the complete picture data 



  //2__ Convert the server network picture to base64
    images.forEach(url => {
    
          let newUrl = `https://dx.showweb.net/upload${
      url}` // You need to spell the prefix to download the network picture 

        this.imageToBase(newUrl).then((res)=>{
    
          this.data.img_arr.push(res)
          this.setData({
    
            img_arr:this.data.img_arr
          })
          })

        })


  imageToBase(img) {
    
   return new Promise((resolve, reject)=>{
    
      wx.downloadFile({
     // Download the pictures first 
        url: img,
        success(res) {
    
          if (res.statusCode === 200) {
    
            wx.playVoice({
    
              filePath: res.tempFilePath // Select the relative path returned by the picture 
            })
            resolve(res.tempFilePath)
          }
        }
      })
    })
  },