So implementieren Sie eine Reihe von Funktionen wie das Hochladen von Bildern im WeChat-Miniprogramm

In diesem Artikel wird hauptsächlich die Methode des WeChat-Applets zum Implementieren der Bild-Upload-, Lösch- und Vorschaufunktionen vorgestellt, einschließlich des WeChat-Applet-Schnittstellenlayouts, der Ereignisreaktion und der Implementierungstechniken für den Bildbetrieb. Freunde in Not können sich darauf beziehen

Das Beispiel in diesem Artikel beschreibt, wie das WeChat-Applet Funktionen zum Hochladen, Löschen und Vorschauen von Bildern implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier stellen wir hauptsächlich das Hochladen von Bildern, das Löschen von Bildern und die Bildvorschau des WeChat-Applets vor

Layout

<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>

JS-Verarbeitung

 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
  })
 }

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Was sind die Unterschiede zwischen Extend und Component in Vue?

So implementieren Sie die Eltern-Kind-Komponenteninteraktion $refs und $emit mit vue.js

So implementieren Sie eine Ajax-Anfrage mit axios (ausführlich Tutorial)

So erzielen Sie einen elastischen Effekt in JavaScript

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Reihe von Funktionen wie das Hochladen von Bildern im WeChat-Miniprogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!