Code d'implémentation de la fonction d'aperçu d'image de l'applet WeChat

L'aperçu de l'image est une fonction très courante. Cet article présente principalement en détail la fonction d'aperçu de l'image de l'applet WeChat. Il a une certaine valeur de référence. J'espère que cela pourra aider tout le monde.

Rendu

Principe

• Utilisez wx.chooseImage pour sélectionner une image locale

• Utilisez wx.previewImage pour prévisualiser l'image.

  
  

WXML

<view>
 <button bindtap="previewImage" type="primary">图片上传预览</button>
 <view class="tui-content"> 
  <image class="tui-preview-img" wx:for="{{previewImageArr}}" bindtap="changePreview" src="{{item}}" src="{{item}}"></image>
 </view>
</view>

WXSS

page{background-color: #efeff4;}
.tui-preview-img{
 width: 200rpx;
 height: 120rpx;
}

JS

Page({
 data: {
  previewImageArr:[]
 },
 previewImage(e){
  var self = this;
  wx.chooseImage({
   count:8,
   success(res) {
    var tempFilePaths = res.tempFilePaths;
    self.setData({ previewImageArr: tempFilePaths});
   }
  })
 },
 changePreview(e){
  var self = this;
  wx.previewImage({
   current: e.currentTarget.dataset.src,
   urls: self.data.previewImageArr
  })
 }
})

Remarque

Les paramètres current et urls de wx.previewImage doivent être des liens http.

Recommandations associées :

Méthode AJAX pour implémenter l'aperçu et le téléchargement des images et générer des vignettes

nodejs pour implémenter l'aperçu des images et Exemple de code téléchargé

Exemple de la façon dont jQuery utilise uploadView pour implémenter la fonction de téléchargement d'aperçu d'image

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!