上传更新头像的业务流程：
1.客户端点击头像选择头像图片
wx.chooseImage()2.将头像图片上传到服务器, 并且获取访问该头像图片的网络路径.
3.将该网络路径, 与当前用户绑定在一起存入数据库
4.在下次登录时, 获取到最新的头像路径, 就可以看到新头像了
云开发-云存储
云存储相当于网络云盘, 可以将本地文件上传存入云存储, 也可以在需要的时候从云存储空间将文件下载到本地.
通过小程序提供的API实现图片上传
wx.cloud.uploadFile()云开发-云函数
云函数是在小程序端定义, 部署到云端, 在云端执行的函数. 可以将云函数当做是nodejs接口进行调用, 流程:
例如：编写一个云函数，部署到云服务器，在小程序端调用.
-
编写一个云函数
右键
cloudFunctions, 选择新建Nodejs云函数即可. (起个云函数名) -
部署到云服务器
右键云函数文件夹, 选择上传并部署(云端安装依赖).
-
在小程序端调用
wx.cloud.callFunction()// pages/me/me.js
const db = wx.cloud.database({
env: '......',
})
Page({
data: {
nickname: '点击登录',
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
islogin: false
},
//点击头像，选择图片，更新头像路径到数据库
tapAvatar() {
if (!this.data.islogin) {
return
}
wx.chooseImage({
count: 1,
success: (res) => {
console.log(res)
let temPath = res.tempFilePaths[0]
this.setData({
avatar: temPath
})
//将图片存到服务器（云存储）、更新到数据库中
this.uploadFile(temPath)
}
})
},
//上传文件
uploadFile(temPath) {
//根据temPath，生成一个随机的图片名称，用于设置云端存储路径
let ext = temPath.substring(temPath.lastIndexOf('.'))
let cloudPath = 'img_' + Math.random() + ext
wx.cloud.uploadFile({
filePath: temPath,
cloudPath: cloudPath,
success: (res) => {
console.log(res)
let fileId = res.fileID
this.updateAvatar(fileId) //更新当前用户头像路径
}
})
},
//更新云数据库中，当前用户的头像路径
updateAvatar(fileId) {
//云函数，获取openid
wx.cloud.callFunction({
name: 'sum',
data: {
a: 1,
b: 1
}
}).then(res => {
console.log(res)
let openid = res.result.openid
db.collection('users').where({
_openid:openid
}).update({
data:{
avatarUrl:fileId
}
}).then(res=>{
console.log(res)
}).catch(err=>{
console.warn(err)
})
})
},
})// 云函数入口文件 cloudfunctions/sum/index.js
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
return {
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
}
}
