微信小程序雲開發-雲存儲的應用-雲相冊

一、准備工作

1、創建數據庫表images

 

 

 

 

2、設置數據庫表images的權限

 

 

 

 

二、創建圖片列表頁

創建圖片列表頁imageList，用於展示圖片列表。該頁面具有跳轉到圖片上傳頁面、圖片列表展示、刪除圖片的功能。

 

 

 

1、imageList.wxml

<!-- 上傳圖片 -->
<view class="camera">
<image src="../../images/相機.png" bindtap="toimageUpload"></image>
</view>

<!-- 圖片列表 -->
<block wx:for="{{imageList}}" wx:key="index">
<view class="item-container">
  <view class="item-name">上傳作者：{{item.name}}</view>
  <view class="item-time">上傳時間：{{item.time}}</view>
  <image class="item-image" src="{{item.imageUrl}}"></image>
  <image class="delete" src="../../images/刪除.png" bindtap="deleteImage" data-id="{{item._id}}"></image>
</view>
</block>

2、imageList.wxss

page{
  /*background-color: #eedeb0;*/
  background-color: #edd1d8;
}
.item-container{
  background-color: #fff;
  margin: 0 20rpx 20rpx 20rpx;
  border-radius: 10rpx;
  position: relative;
}
.item-container image{
  width: 200rpx;
  height: 200rpx;
  margin: 20rpx;
  border-radius: 10rpx;
}
.item-container .delete{
  width: 30rpx;
  height: 30rpx;
  position: absolute;
  top: 5rpx;
  right: 5rpx;
}

/*照相機放在右上角*/
.camera{
  text-align: right;
}
.camera image{
  width: 50rpx;
  height: 50rpx;
  margin: 10rpx 30rpx 10rpx auto;
}

3、imageList.js

Page({
  //頁面的初始數據
  data: {
    imageList:[]
  },
  
  //生命周期函數--監聽頁面顯示
  onShow: function () {
    this.getImageList()
  },

  //獲取圖片列表的函數
  getImageList(){
    let that = this
    let time = Date.parse(new Date())
    console.log("時間戳",time);
    wx.cloud.database().collection("images")
    .orderBy("time","desc")
    .get()
    .then(res=>{
      console.log("獲取數據成功",res);
      that.setData({
        imageList:res.data
      })
    })
    .catch(err=>{
      console.log("獲取數據失敗",err);
    })
  },

  //點擊照相機跳轉到圖片上傳頁面
  toimageUpload(){
    wx.navigateTo({
      url: '/pages/imageUpload/imageUpload',
    })
  },

  //刪除圖片
  deleteImage(e){
    console.log("用戶點擊了刪除按鈕",e);
    let id = e.currentTarget.dataset.id
    //提示確定刪除
    wx.showModal({
      title: '刪除圖片',
      content: '確定刪除這張圖片嗎？',
    })
    .then(res=>{
      console.log("顯示刪除提示框成功",res);
      if(res.confirm){  //如果用戶點擊確定，則從數據庫刪除圖片
      wx.cloud.database().collection("images")
      .doc(id)
      .remove()
      //刪除成功
      .then(res=>{
        console.log("圖片刪除成功",res);
        wx.showToast({
          title: '刪除成功',
          icon:"success",
          duration:2000
        })
      //刪除成功后刷新頁面
      this.getImageList()
      })
      //刪除失敗
      .catch(err=>{
        console.log("圖片刪除失敗",err);
      })
    }
    })
    .catch(err=>{
      console.log("顯示刪除提示框失敗",err);
    })
  }
})

三、創建圖片上傳頁

創建圖片上傳頁imageUpload，用於圖片上傳。該頁面具有上傳圖片的功能。

 1、imageUpload.wxml

<!--上傳圖片的按鈕-->
<button type="primary" bindtap="imageUpload">上傳單張圖片</button>

 2、imageUpload.wxss

button{
  margin-bottom: 50rpx;
}
image{
  width: 200rpx;
  height: 200rpx;
  margin: 10rpx auto; 
}

3、imageUpload.js

//定義空數組，用來存放上傳成功后的圖片路徑
let imageArray = []
//定義當前時間
var util = require("../../utils/util")

Page({
  //上傳單張圖片
  imageUpload(){
    console.log("用戶點擊了上傳單張圖片的按鈕");
    //用戶選擇單張照片
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success :res=> {
        //打印用戶選擇照片成功后的log
        console.log("用戶選擇單張圖片成功",res);
        //輸出用戶所選照片的臨時路徑
        console.log("用戶所選單張圖片的臨時路徑",res.tempFilePaths[0]);
        //顯示加載
        wx.showLoading({
          title: '加載中',
        })
        //上傳單張圖片到雲存儲
        wx.cloud.uploadFile({
          cloudPath: (new Date()).valueOf()+'.png',
          filePath: res.tempFilePaths[0], // 文件路徑
        }).then(res => {
          console.log("單張圖片上傳成功",res)
          //將上傳成功的圖片顯示在當前頁面
          // this.setData({
          //   imageUrl:res.fileID
          // })
          //將上傳成功的圖片添加到數據庫
          this.addImageList(res.fileID)
          //隱藏加載
          wx.hideLoading()
          //提示成功
          wx.showToast({
            title: '圖片上傳成功',
            icon:"success",
            duration:2000
          })
          //跳轉到圖片列表頁
          wx.navigateTo({
            url: '/pages/imageList/imageList',
          })
        }).catch(error => {
          console.log("單張圖片上傳失敗",error);
          //隱藏加載
          wx.hideLoading()
        })
      }
    })
  },

  //將上傳成功的單張圖片添加到數據庫
  addImageList(imageUrl){
    //當前時間
    var currenttime = util.formatTime(new Date)
    wx.cloud.database().collection('images')
    .add({
      data:{
        name:"monica",
        time:currenttime,
        imageUrl:imageUrl
      }
    })
    .then(res=>{
      console.log("圖片添加到數據庫成功",res);
    })
    .catch(err=>{
      console.log("圖片添加到數據庫失敗",err);
    })
  }
})

四、效果展示