Das WeChat-Applet realisiert die Funktion zum Hochladen von Bildern

<Ansichtsklasse="img-wrap">
  <view class="txt">Bild hochladen</view>
  <Klasse anzeigen="imglist">
    <Ansichtsklasse="Artikel" wx:für="{{imgs}}" wx:key="Artikel">
      <image src="{{item}}" alt=""></image>
      <view class='löschen' bindtap='deleteImg' data-index="{{index}}">
        <image src="../../../images/icon.png"></image>
      </Ansicht>
    </Ansicht>
    <view class="last-item" wx:if="{{imgs.length >= 3 ? false : true}}" bindtap="bindUpload">
      <text Klasse="Zeichen">+</text>
    </Ansicht>
  </Ansicht>
</Ansicht>

Daten: {
  Bilder: [],
  Anzahl: 3
},
bindUpload: Funktion (e) {
  Schalter (diese.Daten.Bilder.Länge) {
    Fall 0:
      diese.Daten.Anzahl = 3
      brechen
    Fall 1:
      diese.Daten.Anzahl = 2
      brechen
    Fall 2:
      diese.Daten.Anzahl = 1
      brechen
  }
  var das = dies
  wx.wählenBild({
    Anzahl: that.data.count, // Standard ist 3
    sizeType: ["original", "compressed"], // Sie können angeben, ob es sich um das Originalbild oder das komprimierte Bild handelt. Beide sind standardmäßig verfügbar sourceType: ["album", "camera"], // Sie können angeben, ob die Quelle das Album oder die Kamera ist. Beide sind standardmäßig verfügbar success: function (res) {
      // Gibt eine Liste lokaler Dateipfade für die ausgewählten Fotos zurück. tempFilePath kann als src-Attribut des img-Tags verwendet werden, um das Bild anzuzeigen var tempFilePaths = res.tempFilePaths
      für (var i = 0; i < tempFilePaths.length; i++) {
        wx.uploadDatei({
          URL: „https://graph.baidu.com/upload“,
          Dateipfad: tempFilePaths[i],
          Name: "Datei",
          Kopfzeile: {
            "Inhaltstyp": "multipart/Formulardaten"
          },
          Erfolg: Funktion (res) {
            wenn (res.statusCode == 200) {
              wx.showToast({
                Titel: „Hochladen erfolgreich“,
                Symbol: "keine",
                Dauer: 1500
              })

              das.data.imgs.push(JSON.parse(res.data).data)

              dass.setData({
                Bilder: diese.Daten.Bilder
              })
            }
          },
          fehlgeschlagen: Funktion (Fehler) {
            wx.showToast({
              Titel: "Upload fehlgeschlagen",
              Symbol: "keine",
              Dauer: 2000
            })
          },
          komplett: Funktion (Ergebnis) {
            console.log(Ergebnis.Fehlermeldung)
          }
        })
      }
    }
  })
},
// Bild löschen deleteImg: function (e) {
  var das = dies
  wx.showModal({
    Titel: "Tipps",
    Inhalt: „Löschen“,
    Erfolg: Funktion (res) {
      wenn (res.bestätigen) {
        für (var i = 0; i < that.data.imgs.length; i++) {
          wenn (i == e.currentTarget.dataset.index) that.data.imgs.splice(i, 1)
        }
        dass.setData({
          Bilder: diese.Daten.Bilder
        })
      } sonst wenn (res.abbrechen) {
        console.log("Benutzer klickt auf Abbrechen")
      }
    }
  })
}

.wickeln {
  Breite: 100 %;
  Polsterung: 0 30rpx;
  Box-Größe: Rahmenbox;
}
.wrap .img-wrap {
  Schriftgröße: 30rpx;
  Farbe: #33373E;
  Rand unten: 10rpx;
}
.wrap .img-wrap .txt {
  Rand unten: 20rpx;
}
.wrap .img-wrap .imglist {
  Anzeige: Flex;
  Flex-Wrap: Umwickeln;
}
.wrap .img-wrap .imglist .item {
  Breite: 150rpx;
  Höhe: 150rpx;
  Rand rechts: 22rpx;
  Rand unten: 10rpx;
  Position: relativ;
}
.wrap .img-wrap .imglist .letztes-Element {
  Breite: 150rpx;
  Höhe: 150rpx;
  Textausrichtung: zentriert;
  Zeilenhöhe: 146rpx;
  Rand: 2rpx gestrichelt #8B97A9;
  Box-Größe: Rahmenbox;
}
.wrap .img-wrap .imglist .item Bild {
  Breite: 100 %;
  Höhe: 100%;
}
.wrap .img-wrap .imglist .item .delete {
  Breite: 30rpx;
  Höhe: 30rpx;
  Position: absolut;
  oben: -14rpx;
  rechts: -12rpx;
}