一、准备工作

1、创建数据库表images

2、设置数据库表images的权限

二、创建图片列表页

创建图片列表页imageList，用于展示图片列表。该页面具有跳转到图片上传页面、图片列表展示、删除图片的功能。

1、imageList.wxml

上传作者：{{item.name}} 上传时间：{{item.time}}

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

上传单张图片

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

四、效果展示