微信小程序多圖片上傳和預覽

思路及代碼

1.使用 chooseImage 獲取到圖片 並且在data中保存其生成的零時路徑

Page({
  data: {
    imgs:[],
  },
  uploadImage(){
    let _this = this
      wx.chooseImage({
        count:3,
        success(res){
          _this.setData({imgs:res.tempFilePaths})
        }
      })
  },
})

2.在頁面中 迭代這個數組 得到初步的預覽效果

<image data-url="{{item}}"  wx:for="{{ imgs }}" wx:key="index" src="{{item}}" class="img1" />

3.通過微信自己的接口 previewImage 實現預覽效果

<image bind:tap="yulan" data-url="{{item}}"  wx:for="{{ imgs }}" wx:key="index" src="{{item}}" class="img1" />

  yulan(e){
    let url = e.currentTarget.dataset.url
    let _this = this
    wx.previewImage({
      urls:_this.data.imgs,
      current:url,
      success(res){
        console.log(res)
      }
    })
  },

點擊圖片的預覽效果

4.通過Promise多圖上傳服務器

<button class="btn1" bind:tap="tijiao">立即提交</button>

  tijiao(){
    new Promise(resolve => {
      let uploadImg = [];
      let _this = this
      this.data.imgs.some(item => {
        wx.uploadFile({
          url:'http://xxxxx',  //服務器地址
          filePath:item,name:'File',success(res){
          uploadImg.push(JSON.parse(res.data).data.File)
          uploadImg.length === _this.data.imgs.length?resolve(uploadImg):null
        }})
      })
    }).then(data => {

      })
    })
  },

迭代存放圖片路徑的數組（假設A），依次上傳，每次上傳成功後將 服務器返回的圖片在服務器的路徑 push到另一個(假設)B數組中，當B的長度和A相等時，所有圖片上傳完成，此時執行 Promise  的 resolve 判定，執行 then 之後的操作。

不知道 Promise 用法的，這邊走 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise