微信小程序雲開發（筆記）——上傳圖片

使用了colorUI框架

index.wxml

  <view class="cu-bar bg-white margin-top">
    <view class="action">
      圖片上傳
    </view>
    <view class="action">
      {{imgList.length}}/9
    </view>
  </view>
  <view class="cu-form-group">
    <view class="grid col-3 grid-square flex-sub">
      <view class="bg-img" wx:for="{{imgList}}" wx:key="{{index}}" bindtap="ViewImage" data-url="{{imgList[index]}}">
        <image src='{{imgList[index]}}' mode='aspectFill'></image>
        <view class="cu-tag bg-red" catchtap="DelImg" data-index="{{index}}">
          <text class="cuIcon-close"></text>
        </view>
      </view>
      <view class="solids" bindtap="doUpload" wx:if="{{imgList.length<9}}">
        <text class="cuIcon-cameraadd"></text>
      </view>
    </view>
  </view>

　　

index.js

// 上傳圖片
  doUpload: function() {
    var that = this
    // 選擇圖片
    wx.chooseImage({
　　　 // 選擇圖片數量
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function(res) {
        wx.showLoading({
          title: '上傳中',
        })
          const filePath = res.tempFilePaths[0]
          // 上傳圖片
　　　　　　// 定義圖片名，為了避免重復我是用的是上傳圖片的時間戳
          var timestamp = Date.parse(new Date());
          const cloudPath = timestamp + filePath.match(/\.[^.]+?$/)[0]
          wx.cloud.uploadFile({
            cloudPath,
            filePath,
            success: resa => {
              console.log('[上傳文件] 成功：', resa)
              that.setData({
                imgList: that.data.imgList.concat(resa.fileID)
              })
              that.is_all_ok()
            },
            fail: e => {
              console.error('[上傳文件] 失敗：', e)
              wx.showToast({
                icon: 'none',
                title: '上傳失敗',
              })
            },
            complete: () => {
              wx.hideLoading()
            }
          })
      },
      fail: e => {
        console.error(e)
      }
    })
  },