云MySQL上传数据_小程序-云数据库实现好看的上传文件动态

展示页面

效果展示

list.wxml

设置开头以及背景样式，设置固定发布按钮

上传人：{{item.name}}

上传时间：{{item.time}}

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;

}

.fabu{

width: 40px;

height: 40px;

position: fixed;

bottom: 30px;

right: 15px;

}

.shanchu{

width: 20px;

height: 20px;

position: absolute;

right: 20px;

}

list.js

这里封装获取数据库引用的代码，然后放在onshow的原因，我们要跳转到上传页面，回来数据就要进行刷新，这里涉及onload和onshow的使用区别，去发布功能，是跳转页面，删除图片按钮，是删除数据库数据，由此我想到了直接像以往一样添加数据库数据，来显示，然后发现数据库需要存图片文件，以下方式就比较简单

Page({

data: {

datalist: []

},

onShow: function () {

this.getImageList()

},

getImageList() {

let that = this;

// 1. 获取数据库引用

wx.cloud.database().collection('imagelist').get({

success: function (res) {

console.log(res)

that.setData({

datalist: res.data

})

}

})

},

//去发布页

qufabu() {

wx.navigateTo({

url: '../home/home',

})

},

//删除图片

delete2(event) {

let that = this;

let id = event.currentTarget.dataset.id;

console.log("点击了删除按钮", id)

wx.showModal({

title: '警告！',

content: '您确定要删除吗？',

success(res) {

if (res.confirm) {

console.log("点击了确定按钮")

wx.cloud.database()

.collection('imagelist') //操作那个表

.doc(id) //对那条数据进行操作

.remove({ //执行删除操作

success(res) {

console.log("删除成功", res)

that.getImageList();

}

})

} else {

console.log("点击了取消按钮")

}

}

})

}

})

上传图片页面

效果展示

home.wxml

上传图片

home.js

上传图片使用时间戳来命名传入云存储库，之后设置页面显示验证图片是否上传正确，使用云数据库更改数据

Page({

data: {

imgUrl: ""

},

upLoad() {

let that = this;

let timestamp = Date.parse(new Date())

console.log("当前时间戳", timestamp)

console.log("点击了图片上传")

wx.chooseImage({

count: 1,

success: chooseResult => {

wx.showLoading({

title: '上传中',

})

//将图片上传到服务器

wx.cloud.uploadFile({

//指定上传到的云路径

cloudPath: timestamp + ".png",

//指定要上传的文件的小程序临时路径

filePath: chooseResult.tempFilePaths[0],

//成功回调

success: res => {

wx.hideLoading()

console.log("上传成功", res)

this.setData({

imgUrl: res.fileID

})

this.addImgList(res.fileID)

}

})

}

})

},

//添加到图片列表

addImgList(imgurl) {

let that=this

// 1. 获取数据库引用

// 2. 构造查询语句

// collection 方法获取一个集合的引用

// where 方法传入一个对象，数据库返回集合中字段等于指定值的 JSON 文档。API 也支持高级的查询条件(比如大于、小于、in 等)，具体见文档查看支持列表

// get 方法会触发网络请求，往数据库取数据

wx.cloud.database().collection('imagelist').add({

data: {

name: "东血老师",

imgUrl: imgurl,

time:that.getNowFormatDate()

},

success: res => {

console.log("上传成功", res)

},

fail: err => {

console.log("上传失败", err)

}

})

},

//获取当前时间,返回时间格式：2019-05-23 15:43:36

getNowFormatDate: function () {

var date = new Date();

var seperator1 = "-";

var seperator2 = ":";

var month = date.getMonth() + 1;

var strDate = date.getDate();

if (month >= 1 && month <= 9) {

month = "0" + month;

}

if (strDate >= 0 && strDate <= 9) {

strDate = "0" + strDate;

}

var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +

" " + date.getHours() + seperator2 + date.getMinutes() +

seperator2 + date.getSeconds();

return currentdate;

}

})