[Applet WeChat] Se realiza la función de seleccionar imágenes y publicar imágenes en el terminal móvil

El producto terminado es el siguiente

Este artículo describe principalmente la implementación de la función de imagen de selección.

Principio :

// html
<view class="chooseImageBox">
	<!-- 渲染已选择图片 -->
    <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>
    
	<!-- 点击选择图片 -->
    <view class="chooseImage" bindtap="chooseImage">   
        <image src="./images/jia.png"></image>
    </view>
</view>

Antes de que el usuario seleccione una imagen, la foto variable es una matriz vacía. Después de que el usuario seleccione una imagen, guarde la dirección de caché de la imagen en una variable para representar la imagen seleccionada. y seleccione el botón de imagen para retroceder.

Además, hay función de vista previa de imagen y función de eliminación de imagen, el principio no se repetirá.

Si hay algo que no entiende en el código, puede hacer preguntas en el área de comentarios.

Todos los códigos son los siguientes:

// 点击事件 - 选择图片
chooseImage(){
    
    
    let that = this;
    wx.chooseMedia({
    
                                    // 上传图片
      count: 6,
      mediaType:'image',
      sourceType:['album','camera'],
      sizeType: ['original', 'compressed'],       // 可选择原图、压缩图
      success: (res) => {
    
    
          let photo = that.data.photo.concat(res.tempFiles);
          
          wx.getImageInfo({
    
                           // 获得图片信息
              src: photo[0].tempFilePath,
              success: (res) => {
    
    
                  photo[0].imageHeight = res.height;
                  photo[0].imageWidth = res.width;
                  that.setData({
    
     photo })
              }
          })
      }
  })
},
// 点击事件 - 删除图片
del_beChoosen_Image(e) {
    
    
  let index = e.target.dataset.index;   // 照片索引值
  let photo = this.data.photo.slice();  

  photo.splice(index,1);                // 注意：splice返回值是删除的元素, 并改变原数组
  this.setData({
    
     photo });
},
// 点击已选图片 - 进行预览
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;
}