操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综

以前寫過小程序網(wǎng)絡和本地圖片到相冊的方法：，寫過上傳一張或多張圖片到阿里云OSS， 寫過小程序加載本地圖片路徑問題，這次寫個布局關于多張圖片上傳。

效果圖

思路： 整體圖片選擇使用一個view控件，前面選中的圖片為一個block根據(jù)選擇圖片的數(shù)量來顯示多少個微信小程序上傳圖片到oss，后面的選擇圖片按鈕為一個view。選中圖片上面的刪除按鈕，使用絕對定位和相對定位來處理。添加圖片，刪除圖片，點擊選中圖片查看大圖等添加一個點擊事件

考慮問題： 1.上傳的多少張圖片？ 2.上傳后想刪除？ 3.如何控制布局，用好用flex布局。

關鍵代碼:

 /** 選擇圖片 */
  chooseImage: function () {
    var that = this;
    wx.chooseImage({
      count: 9 - that.data.imgArr.length,
      sizeType: ['original', 'compressed'], 
      sourceType: ['album', 'camera'], 
      success: function (res) {
        if (res.tempFilePaths.count == 0) {
          return;
        }
        //上傳圖片
        var imgArrNow = that.data.imgArr;
        imgArrNow = imgArrNow.concat(res.tempFilePaths);
        that.setData({
          imgArr: imgArrNow
        })
        that.chooseViewShow();
      }
    })
  },

復制

代碼中的9是中最多傳9張圖片，圖片類型是否為壓縮，圖片來源是相冊還是相機。

/** 刪除圖片 */
  deleteImv: function (e) {
    var imgArr = this.data.imgArr;
    var itemIndex = e.currentTarget.dataset.id;
    imgArr.splice(itemIndex, 1);
    this.setData({
      imgArr: imgArr
    })
    //判斷是否隱藏選擇圖片
    this.chooseViewShow();
  },

復制

刪除照片，改變布局格式顯示。

/** 是否隱藏圖片選擇 */
  chooseViewShow: function () {
    if (this.data.imgArr.length >= 9) {
      this.setData({
        chooseViewShow: false
      })
    } else {
      this.setData({
        chooseViewShow: true
      })
    }
  },
  /** 顯示圖片 */
  showImage: function (e) {
    var imgArr = this.data.imgArr;
    var itemIndex = e.currentTarget.dataset.id;
    wx.previewImage({
      current: imgArr[itemIndex], // 當前顯示圖片的http鏈接
      urls: imgArr // 需要預覽的圖片http鏈接列表
    })
  },

復制

用到系統(tǒng)自帶的方法微信小程序上傳圖片到oss，點擊圖片預覽大圖。

demo地址為：