小程序上傳多張圖片

任務：小程序上傳圖片到服務器，最多上傳三張，前端能夠刪除圖片

使用到的API有兩個：wx.uploadFile wx.chooseImage

示例WXML：

<view class="sale after-pic">
  <block wx:for="{{imgList}}" wx:key="{{index}}">
    <view class="pic">
      <image src="{{item}}" />
      <icon type="clear" size="20" catchtap="clearImg" data-id="{{index}}"/>
    </view>
  </block>
  <image src="../../images/upload.png" catchtap="chooseImage" />
</view>
<button catchtap="onSub">提交</button>

imgList是wx.chooseImage成功後，返回的圖片臨時地址

示例JS

Page({
  data: {
    imgList:[]
  },
  // 使用async await等待圖片上傳
  onSub: async function() {
    // 點擊提交後，開始上傳圖片
     let imgUrls = []
     for (let index = 0; index < this.data.imgList.length; index++) {
       await this.uploadFile(this.data.imgList[index]).then((res) => {
         // 這裏要注意把res.data parse一下，默認是字符串
         let parseData = JSON.parse(res.data)
         imgUrls.push(parseData.data) // 圖片地址
       })
     }
     console.log(imgUrls) // 3張圖片上傳成功後，執行其餘操做
  },
  // 刪除某張圖片
  clearImg: function (params) {
    let imgList = this.data.imgList
    let id = params.currentTarget.dataset.id // 圖片索引
    imgList.splice(id, 1) // 刪除
    this.setData({
      imgList: imgList
    })
  },
  chooseImage: function (params) {
    wx.chooseImage({
      count: 3, // 作多3張
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        // 存儲臨時地址
        this.setData({
          imgList: res.tempFilePaths
        })
      }
    })
  },
  uploadFile: function (filePath) {
    // 返回Promise是爲了解決圖片上傳的異步問題
    return new Promise( (resolve, reject) => {
      wx.uploadFile({
        url: app.globalData.baseUrl + '/file/upload', // 上傳地址
        filePath: filePath,
        name: 'file', // 這裏的具體值，問後端人員
        formData: {},
        header: {
          "Content-Type": "multipart/form-data"
        },
        success: (res) =>{
          // 圖片上傳成功後，後端會返回一個地址，能夠把它存到imgUrls
          this.imgUrls.push(res.data.data)
        },
        fail:(err) => {
          console.log(err)
        }
      })
    })
  }
})

特別說明一下，截止我寫這篇文章爲止，小程序仍是不支持async/await語法的，因此須要使用regenerator這個庫