WeChatアプレットは写真アップロード機能を実現

<view class="img-wrap">
  <view class="txt">写真をアップロード</view>
  <view class="imglist">
    <view class="item" wx:for="{{imgs}}" wx:key="item">
      <image src="{{item}}" alt=""></image>
      <view class='delete' bindtap='deleteImg' data-index="{{index}}">
        <画像 src="../../../images/icon.png"></画像>
      </ビュー>
    </ビュー>
    <view class="last-item" wx:if="{{imgs.length >= 3 ? false : true}}" bindtap="bindUpload">
      <text class="sign">+</text>
    </ビュー>
  </ビュー>
</ビュー>

データ： {
  画像: [],
  カウント: 3
},
バインドアップロード: 関数 (e) {
  スイッチ (this.data.imgs.length) {
    ケース0:
      このデータ数 = 3
      壊す
    ケース1:
      このデータ数 = 2
      壊す
    ケース2:
      このデータ数 = 1
      壊す
  }
  var that = これ
  wx.chooseImage({
    count: that.data.count, // デフォルトは 3
    sizeType: ["original", "compressed"], // オリジナル画像か圧縮画像かを指定できます。どちらもデフォルトで使用可能です。sourceType: ["album", "camera"], // ソースがアルバムかカメラかを指定できます。どちらもデフォルトで使用可能です。success: function (res) {
      // 選択した写真のローカルファイルパスのリストを返します。tempFilePath は、画像を表示するための img タグの src 属性として使用できます。var tempFilePaths = res.tempFilePaths
      (var i = 0; i < tempFilePaths.length; i++) {
        wx.uploadFile({
          URL: 'https://graph.baidu.com/upload',
          ファイルパス: tempFilePaths[i],
          名前: "ファイル",
          ヘッダー: {
            「コンテンツタイプ」: 「マルチパート/フォームデータ」
          },
          成功: 関数 (res) {
            （res.statusCode == 200）の場合{
              wx.showToast({
                タイトル: 「アップロードに成功しました」
                アイコン: "なし",
                所要時間: 1500
              })

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

              that.setData({
                画像: that.data.imgs
              })
            }
          },
          失敗: 関数 (err) {
            wx.showToast({
              タイトル: 「アップロードに失敗しました」
              アイコン: "なし",
              期間: 2000
            })
          },
          完了: 関数 (結果) {
            コンソールログ(結果.errMsg)
          }
        })
      }
    }
  })
},
// 画像を削除する deleteImg: function (e) {
  var that = これ
  wx.showModal({
    タイトル: 「ヒント」、
    内容:「削除」、
    成功: 関数 (res) {
      （res.confirm）の場合{
        (var i = 0; i < that.data.imgs.length; i++) {
          i == e.currentTarget.dataset.index の場合、i, 1 でデータイメージをスプライスします。
        }
        that.setData({
          画像: that.data.imgs
        })
      } そうでない場合 (res.cancel) {
        console.log("ユーザーがキャンセルをクリック")
      }
    }
  })
}

。包む {
  幅: 100%;
  パディング: 0 30rpx;
  ボックスのサイズ: 境界線ボックス;
}
.wrap .img-wrap {
  フォントサイズ: 30rpx;
  色: #33373E;
  下部マージン: 10rpx;
}
.wrap .img-wrap .txt {
  下部マージン: 20rpx;
}
.wrap .img-wrap .imglist {
  ディスプレイ: フレックス;
  flex-wrap: ラップ;
}
.wrap .img-wrap .imglist .item {
  幅: 150rpx;
  高さ: 150rpx;
  右マージン: 22rpx;
  下部マージン: 10rpx;
  位置: 相対的;
}
.wrap .img-wrap .imglist .last-item {
  幅: 150rpx;
  高さ: 150rpx;
  テキスト配置: 中央;
  行の高さ: 146rpx;
  境界線: 2rpx 破線 #8B97A9;
  ボックスのサイズ: 境界線ボックス;
}
.wrap .img-wrap .imglist .item 画像 {
  幅: 100%;
  高さ: 100%;
}
.wrap .img-wrap .imglist .item .delete {
  幅: 30rpx;
  高さ: 30rpx;
  位置: 絶対;
  上: -14rpx;
  右: -12rpx;
}