微信小程序云开发（笔记）——上传图片

使用了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)
      }
    })
  },

　　

 

转载于:https://www.cnblogs.com/yeshengshudaixiong/p/11533357.html