微信小程序云开发-云存储的应用-云相册

一、准备工作

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);
    })
  }
})

四、效果展示