Comment mettre en œuvre une série de fonctions telles que le téléchargement d'images dans le mini-programme WeChat

Cet article présente principalement la méthode de l'applet WeChat pour implémenter les fonctions de téléchargement, de suppression et de prévisualisation d'images, impliquant la disposition de l'interface de l'applet WeChat, la réponse aux événements et les techniques de mise en œuvre liées au fonctionnement de l'image. Les amis dans le besoin peuvent s'y référer

. L'exemple de cet article décrit comment l'applet WeChat implémente les fonctions de téléchargement, de suppression et de prévisualisation d'images. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Ici, nous introduisons principalement le téléchargement d'images, la suppression d'images et l'aperçu d'images de l'applet WeChat

Mise en page

<view class="img-v">
 <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
  <image src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg"></image>
  <view class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></view>
 </view>
 <view class="upload-img-btn" bindtap="chooseImg"></view>
</view>

Traitement JS

 data: {
  imgs: []
 },
// 上传图片
 chooseImg: function (e) {
  var that = this;
  var imgs = this.data.imgs;
  if (imgs.length >= 9) {
   this.setData({
    lenMore: 1
   });
   setTimeout(function () {
    that.setData({
     lenMore: 0
    });
   }, 2500);
   return false;
  }
  wx.chooseImage({
   // count: 1, // 默认9
   sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
   sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
   success: function (res) {
    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
    var tempFilePaths = res.tempFilePaths;
    var imgs = that.data.imgs;
    // console.log(tempFilePaths + '----');
    for (var i = 0; i < tempFilePaths.length; i++) {
     if (imgs.length >= 9) {
      that.setData({
       imgs: imgs
      });
      return false;
     } else {
      imgs.push(tempFilePaths[i]);
     }
    }
    // console.log(imgs);
    that.setData({
     imgs: imgs
    });
   }
  });
 },
 // 删除图片
 deleteImg: function (e) {
  var imgs = this.data.imgs;
  var index = e.currentTarget.dataset.index;
  imgs.splice(index, 1);
  this.setData({
   imgs: imgs
  });
 },
 // 预览图片
 previewImg: function (e) {
   //获取当前图片的下标
  var index = e.currentTarget.dataset.index;
   //所有图片
  var imgs = this.data.imgs;
  wx.previewImage({
   //当前显示图片
   current: imgs[index],
   //所有图片
   urls: imgs
  })
 }

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Quelles sont les différences entre extend et composant dans Vue ?

Comment implémenter l'interaction des composants $refs et $emit parent-enfant à l'aide de vue.js

Comment implémenter la requête ajax à l'aide d'axios (détail tutoriel)

Comment obtenir un effet élastique en JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!