小程序开发-图片上传到云存储
1、获取用户手机中的照片路径
使用[代码]wx.chooseImage[代码]
微信开发者文档中的介绍
https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html
下面是一个demo,其中success会返回本地图片的路径,此时已经可以用来做临时预览了,但是我们还要上传到云存储中,这样才算是更新图片成功。
[代码] wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success : (res)=>{
//console.log(res);
const tempFilePaths = res.tempFilePaths[0];
this.setData({
userPhoto: tempFilePaths
});
}
})
[代码]
2、上传
使用[代码]wx.cloud.uploadFile[代码]
微信开发者文档介绍
上一步获得的地址存储在 userPhoto 中,将用户的openid设为改文件的路径。
```Date.now()``为当前的时间戳,为文件添加唯一的标识
[代码]let cloudPath = "userPhoto/" + app.userInfo._openid + Date.now() + ".jpg";
wx.cloud.uploadFile({
cloudPath,
filePath: this.data.userPhoto
})
[代码]
3、将存储好的数据更新到用户的数据中,这样用户就可以使用云存储中的图片。
在成功调用完上一个函数之后,会返回一个fileID,存储着上传成功的文件的路径。
[代码]let cloudPath = "userPhoto/" + app.userInfo._openid + Date.now() + ".jpg";
wx.cloud.uploadFile({
cloudPath,
filePath: this.data.userPhoto
}).then((res)=>{
//console.log(res);
let fileID = res.fileID;
if(fileID){
db.collection('users').doc(app.userInfo._id).update({
data : {
userPhoto : fileID
}
})
[代码]
使用[代码]db.collection('users').doc(app.userInfo._id).update[代码]将fileID更新到用户的数据列表中即可。
还要记得更新此时的全局变量,然后再渲染一遍用户的头像,这样就更新成功了。