微信小程序自带的云数据库是一个功能强大的数据库,这次我们来介绍如何进行云开发上传图片,并且保存临时链接和数据链接
完整的代码在https://github.com/ksyueying/pic_updata.git中,接下来只讲解部分核心代码:
微信小程序JS端:
onLoad: function() {
var that = this
// 调用云函数
wx.cloud.callFunction({
name: 'login',
data: {},
success: res => {
console.log('[云函数] [login] user openid: ', res.result.openid)
app.globalData.openid = res.result.openid
that.setData({
openid_info: res.result.openid
})
},
fail: err => {
console.error('[云函数] [login] 调用失败', err)}
})
},
以上代码优先获取OPENID方便云数据库操作
getdata() {
let that = this;
wx.chooseImage({//这一段是上传图片
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
wx.showLoading({
title: '上传中',
});
let filePath = res.tempFilePaths[0];
wx.cloud.uploadFile({//这一段是上传到云数据中的
cloudPath: 'mibao1d.jpg',
filePath: filePath,//这个就是图片的存储路径
success: res => {
console.log('[上传图片]成功:', res)
that.setData({
bigImg: res.fileID,
});
let fileID = res.fileID;
let open_info = that.data.openid_info
console.log(that.data.bigImg)
console.log(that.data.openid_info)
wx.getImageInfo({
src: that.data.bigImg,
success: function (res) {
console.log('happening:', res.path) //这个是转换的临时链接res.path
that.setData({
tempath:res.path
})
console.log('tempath',that.data.tempath)
let tempinfo = that.data.tempath
db.collection('newdata').add({//这个就把云数据的图片存储路径上传到数据链表中了
data: {
imginfo: fileID,
respath: tempinfo
},
success(res) {
console.log('get success')
console.log(res)
console.log(tempinfo)
}
})
},
fail: function (res) {
console.log('failure')
}
})const db = wx.cloud.database();
},
fail: e => {
console.error('[上传图片]失败:', e)
},
complete: () => {
wx.hideLoading()
}
});
}
})
}
以上代码,首先从本地获取图片,然后通过wx.cloud.uploadFile上传到云数据库中,再获取临时链接地址,通过db.collection().add保存到云数据库中。
上传图片
【微信小程序|微信小程序 云开发——图片上传】展示页面(wxss展示不写了,可以自己设计下就好),这个就是上传图片,展示出来
推荐阅读
- 微信小程序地址位置定位wx.getLocation 4G 与WIFI 不一致
- C#|微信小程序开发系列(六)——“处理请求时出错”怎么处理()
- 微信小程序|微信小程序从入门到入土教程(02)
- 微信小程序开发项目实战(五)
- 微信小程序前端请求云函数显示超时错误
- wepy|wepy微信小程序swiper组件设置自适应图片高度,图片高度不一致取最高图片的高度
- 解决实际问题|小程序部署环境问题
- 小程序之云开发初体验
- 微信小程序中获取时间戳IOS不兼容
- 如何实现微信小程序wx.setStorage数据缓存实现缓存过期时间