微信小程序|微信小程序 云开发——图片上传

微信小程序自带的云数据库是一个功能强大的数据库,这次我们来介绍如何进行云开发上传图片,并且保存临时链接和数据链接
完整的代码在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展示不写了,可以自己设计下就好),这个就是上传图片,展示出来

    推荐阅读