小程序开发-图片上传到云存储
发布于 3 年前 作者 minghou 3347 次浏览 来自 分享

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更新到用户的数据列表中即可。

还要记得更新此时的全局变量,然后再渲染一遍用户的头像,这样就更新成功了。

4 回复

用心了,果断收藏

简单易懂

这里面还有一个批量上传图片是需要用到的一个异步的坑,使用Promise解决,留个坑,明天写

学习了,收藏

回到顶部