评论

小程序开发-图片上传到云存储

微信小程序上传图片,使用云存储的便捷方案

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

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

点赞 6
收藏
评论

5 个评论

  • 朝闻道
    朝闻道
    2021-11-16

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


    2021-11-16
    赞同 2
    回复 1
    • Trying
      Trying
      2022-04-08
      后继文章呢
      2022-04-08
      回复
  • TYXX
    TYXX
    2021-11-16

    用心了,果断收藏

    2021-11-16
    赞同 2
    回复
  • Smooth
    Smooth
    2021-11-16

    简单易懂

    2021-11-16
    赞同 2
    回复
  • Coder_G
    Coder_G
    2022-06-22

    如何更新图片呢,这样每次更新用户图片旧图片都会保存在里面

    2022-06-22
    赞同
    回复
  • Jack Li
    Jack Li
    2021-11-16

    学习了,收藏

    2021-11-16
    赞同
    回复
登录 后发表内容