微信小程序 從本地相冊選擇圖片或使用相機拍照chooseImage()和預覽圖片previewImage()

要實現的效果如圖所示

wxml:

  <view class='suggest_img'>請提供相關問題的截圖或照片</view>
  <view class='img_box'>
    <block wx:for="{{add_img}}" wx:key="{{index}}">
      <view class='have_img'>
        <image src='{{item}}' class='sug_picture' data-num="{{index}}" catchtap='preview_img'></image>
        <image src='../../images/delete_img.png' style='width:40rpx;height:40rpx;' data-num="{{index}}" class='delete_img' catchtap='delete_th'></image>
      </view> 
    </block>
    <view class='no_img' bindtap="gotoShow">
      <image src='../../images/no_img.png'></image>
      <view>上傳圖片</view> 
    </view>
  </view>

js:

  data: {

  　　add_img:[]

  },

gotoShow:function(){
    var that=this;
    wx.chooseImage({
      success: function(res) { 
        // console.log(res.tempFilePaths)
        var src = res.tempFilePaths;
        var aa=that.data.add_img.concat(src)
        // console.log(aa)
        that.setData({
          add_img:aa
        })
      },
    })
  },
  delete_th:function(e){
    var num=e.currentTarget.dataset.num;
    var that=this;
    wx.showModal({
      title: '提示',
      content: '確定要刪除嗎？',
      success: function (res) {
        if (res.confirm) { 
          that.data.add_img.splice(num,1)
          that.setData({
            add_img:that.data.add_img
          })
        } else if (res.cancel) {
          console.log('用戶點擊取消')
        }
      }
    })
  },
  preview_img:function(e){
    var cur_num=e.currentTarget.dataset.num;
    var img_list=this.data.add_img
    wx.previewImage({
      current:img_list[cur_num],
      urls: this.data.add_img
    })
  },