[wechat applet] the mobile terminal selects and publishes pictures

The finished picture is as follows

This article mainly describes the implementation of the function of selecting pictures .

principle ：

// html
<view class="chooseImageBox">
	<!--  Render selected pictures  -->
    <block wx:for="{
     {photo}}" wx:key="photoIndex">     
        <view class="beChoosen_ImageBox">
            <image class="beChoosen_Image" src="{
     {item.tempFilePath}}" bindtap="preViewImage" data-index="{
     {index}}" mode="aspectFill"></image>
            <view class="del_beChoosen_Image" bindtap="del_beChoosen_Image" data-index="{
     {index}}">×</view>
        </view>
    </block>
    
	<!--  Click to select a picture  -->
    <view class="chooseImage" bindtap="chooseImage">   
        <image src="./images/jia.png"></image>
    </view>
</view>

Before the user selects the picture , Variable photo Empty array . After the user selects the picture , Store the image cache address in the variable , You can render the selected picture . And select the picture button to move back .

besides , There is also a picture preview function 、 Delete picture function , The principle will not be repeated .

If you don't understand the code, you can ask questions in the comment area .

All the codes are as follows ：

//  Click event  -  Select Picture 
chooseImage(){
    
    let that = this;
    wx.chooseMedia({
                                    //  To upload pictures 
      count: 6,
      mediaType:'image',
      sourceType:['album','camera'],
      sizeType: ['original', 'compressed'],       //  The original drawing can be selected 、 Compressed graph 
      success: (res) => {
    
          let photo = that.data.photo.concat(res.tempFiles);
          
          wx.getImageInfo({
                           //  Get picture information 
              src: photo[0].tempFilePath,
              success: (res) => {
    
                  photo[0].imageHeight = res.height;
                  photo[0].imageWidth = res.width;
                  that.setData({
     photo })
              }
          })
      }
  })
},
//  Click event  -  Delete pictures 
del_beChoosen_Image(e) {
    
  let index = e.target.dataset.index;   //  Photo index value 
  let photo = this.data.photo.slice();  

  photo.splice(index,1);                //  Be careful ：splice The return value is the deleted element ,  And change the original array 
  this.setData({
     photo });
},
//  Click on the selected picture  -  To preview 
preViewImage(e) {
    
  let urls = this.data.photo.map(item => {
    
    return item.tempFilePath
  });
  let index = e.target.dataset.index;

  wx.previewImage({
    
    urls: urls,
    current: urls[index]
  })
},

// css .chooseImageBox {
    
  display: flex;
  flex-direction: row;
  align-items: center;
}
.beChoosen_ImageBox {
    
  display: inline-block;
  position: relative;
  width: 150rpx;
  height: 150rpx;
  margin-right: 20rpx;
}
.beChoosen_Image {
    
  width: 150rpx;
  height: 150rpx;
  border-radius: 15rpx;
}
.del_beChoosen_Image {
    
  position: absolute;
  top: 5rpx;
  right: 5rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25rpx;
  height: 25rpx;
  border-radius: 50%;
  background-color: rgb(10, 10, 10,0.3);
  font-size: 25rpx;
  color: #fff;
}
.chooseImage {
    
  width: 150rpx;
  height: 150rpx;
  background-color: rgb(245, 245, 245);
  border-radius: 15rpx;

  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.chooseImage image {
    
  display: inline-block;
  width: 60rpx;
  height: 60rpx;
}