正文
微信小程序云开发-云存储的应用-云相册
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
一、准备工作
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);
})
}
})
四、效果展示
