【微信小程序】 微信小程序 加载所有云存储图片? 包括上传,下载,删除

参考:https://blog.csdn.net/weixin_42370891/article/details/90106583

引用:https://edu.csdn.net/course/detail/9604 很棒的教程,句句金句

 

wxml






  
    
    
    
    
  





wxss

/* pages/ceshi/index/list/list.wxss */
page{
  background: #2db7f5;
}
/*卡片*/
.item-container{
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 92%;
  margin: 4%;
  display: flex;
  flex-direction: column;
  background: white;
  padding-top: 5pt;
  padding-bottom: 5pt;
  border-radius: 5px;
}

/**/
.item-name{
  font-size: 12px;
  margin-left:15px;
}

/**/
.img{
  width:100px;
  height: 100px;
  margin-top: 10px;
  margin-left: 20px;
}

.scimg{
  width: 88rpx;
  height: 88rpx;
  position: fixed;
  bottom:30rpx;
  right: 30rpx;
}

.delicon{
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  right: 50rpx;
  
}

js

// pages/ceshi/index/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    dataList: []

  },

 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getImageList();
  },
getImageList(){
  let that = this;
  wx.cloud.database().collection('imagelist').get({
    success(res){
      console.log(res)
      that.setData({
        dataList:res.data
      })
    }
  })
},



ddel(event){
  let that = this;
  let id = event.currentTarget.dataset.id;
  console.log('id', id)
  //console.log('click',event)
  wx.showModal({
    title: '删除!',
    content: '确定删除嘛?',
    success(res){
      if(res.confirm){
        console.log("点击确认")
        wx.cloud.database()
          .collection('imagelist')
          .doc(id)//对那一条数据
          .remove({
            success(res) {
              console.log("delSuccess", res)
              that.getImageList();
            }
          })
      }else{
        console.log("点击了取消按钮")
      }
    }
  })
  
},

  upload() {
    let that = this;
    let timestamp = Date.parse(new Date());
    console.log(timestamp)
    console.log("uploadimg")
    wx.chooseImage({
      count: 1,
      success: chooseResult => {
        wx.showLoading({
          title: 'loading',
        })
        wx.cloud.uploadFile({
          cloudPath: timestamp + '.png',
          filePath: chooseResult.tempFilePaths[0],

          success: res => {
            wx.hideLoading()
            console.log('loaded', res)
            that.setData({
              imgUrl: res.fileID
            })
            that.addImgList(res.fileID)
            
          }

        })
      }
    })
  },

  //添加到图片列表
  addImgList(imgurl) {
    let that=this;
    wx.cloud.database().collection('imagelist').add({
      data: {
        name: "178",
        imgUrl: imgurl
      },
      success(res) {
        console.log("success", res)
        that.getImageList();
      }, fail(res) { console.log(res) }
    })
    
  },

})

 

你可能感兴趣的:(【微信小程序】 微信小程序 加载所有云存储图片? 包括上传,下载,删除)