小程序云开发图片上传

直接复制代码可用

<view class="mine_avatar_cont">
  <view class="mine_avatar_list" wx:for="{{avarat_list}}" wx:key="*this">
    <view class="mine_avatar_list_cover"><image src="{{item.avatar}}" mode="aspectFill"></image></view>
    <view class="avatar_btn gray_font" wx:if="{{item.status == 1}}" bindtap="delete_avarat_fun" data-item="{{item}}" data-index="{{index}}"><text>审核通过</text> <text>删除</text></view>
    <view class="avatar_btn red_font" wx:if="{{item.status == 0}}">审核中</view>
    <view class="avatar_btn gray_font" wx:if="{{item.status == 2}}" bindtap="delete_avarat_fun" data-item="{{item}}" data-index="{{index}}">
      <text>审核不通过</text> <text>删除</text>
    </view>
  </view>
  <view wx:if="{{avarat_list.length < 10}}" class="mine_avatar_list upload_img" bindtap="upload_user_avatar">
    <image src="../images/upload_img.png" mode="aspectFill"></image>
    <view>由于个人经费问题</view>
    <view>每人最多上传10张个人头像</view>
    <view>审核过才可用</view>
  </view>
</view>

样式

page{background-color:#f7f7f7;}
.mine_avatar_cont{padding:30rpx 30rpx 0 30rpx;}
.mine_avatar_list{width:335rpx;height:422rpx;background-color:#fff;box-shadow: 0px 6px 6px rgba(211, 211, 211, 0.16);display:inline-block;margin-bottom:30rpx;vertical-align: top;}
.mine_avatar_list:nth-child(odd){margin-right:20rpx;}
.mine_avatar_list .mine_avatar_list_cover{width:100%;height: 335rpx;background-color:#f8f8f8;}
.mine_avatar_list_cover image{width:100%;height: 100%;}
.mine_avatar_list .avatar_btn{height:87rpx;line-height:87rpx;text-align: center;font-size:30rpx;font-weight: 400;color:#B660FF;}
.upload_img{font-size:24rpx;color:#626262;text-align:center;}
.upload_img image{width:130rpx;height:130rpx;margin-top:100rpx;}

.mine_avatar_list .red_font{color:#f00;}
.gray_font text:first-child{color:#999;margin-right:20rpx;}

获取列表

 get_list_avatar(){ //这个要在onload里调用
    let _this = this
    db.collection('user_avatar').where({ //user_avatar数据库表
      _openid: _this.data.userInfo.openid,
    }).limit(10).get({
      success: function(res) {
        // res.data 是包含以上定义的两条记录的数组
        _this.setData({
          avarat_list:res.data
        })
        console.log(res.data)
      }
    })
  },

上传图片后保存到数据库

upload_user_avatar(){
    let _this = this
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success (res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths[0]
        const name = Math.random() * 1000000;
        const cloudPath = name + tempFilePaths.match(/\.[^.]+?$/)[0]
        console.log(tempFilePaths,cloudPath,'kkk')
        wx.showLoading({
          title: '正在提交...',
        })
        wx.cloud.uploadFile({
          cloudPath, // 上传至云端的路径
          filePath: tempFilePaths, // 小程序临时文件路径
          success: res => {
            // 返回文件 ID
            db.collection("user_avatar").add({
              data: {
                avatar: res.fileID,
                status: '0'
              },
              success: function () {
                wx.showToast({
                  title: '头像提交成功！',
                  icon: 'none',
                  duration: 2000
                })
                _this.data.avarat_list.unshift({status:0,avatar:res.fileID})
                _this.setData({avarat_list:_this.data.avarat_list})
              },
              fail: function () {
                wx.showToast({
                  title: '图片提交失败！',
                  icon: 'none',
                  duration: 2000
                })
              }
            })
            console.log(res.fileID)
          },
          fail: console.error
        })
      }
    })
  }

删除图片

delete_avarat_fun(e){ //删除
    let _this = this
    let obj = e.currentTarget.dataset
    wx.showModal({
      title: '提示',
      content: '确定删除当前头像？',
      confirmColor:"#B660FF",
      success (res) {
        if (res.confirm) {
          wx.showLoading({
            title: '正在删除...',
          })
          wx.cloud.deleteFile({
            fileList: [obj.item.avatar],
            success: res => {
              // handle success
              if(res.fileList[0].status == 0){
                db.collection('user_avatar').doc(obj.item._id).remove({
                  success: function(res) {
                    wx.showToast({
                      title: '删除成功！',
                      icon: 'none',
                      duration: 2000
                    })
                    _this.data.avarat_list.splice(obj.index,1)
                    _this.setData({avarat_list:_this.data.avarat_list})
                    console.log(res.data)
                  }
                })
              }
              console.log(res.fileList,obj.item.avatar,'成功')
            },
            fail(){
              wx.showToast({
                title: '删除失败！',
                icon: 'none',
                duration: 2000
              })
            }
          })
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }

效果图的审核，还未完成