小程序云开发上传图片-到云存储并保存路径到数据库

//js
Page({
  data: {
    bigImg:'../../images/my-image.jpg'//默认图片，设置为空也可以
  },
changeBigImg() {
    let that = this;
    let openid = app.globalData.openid || wx.getStorageSync('openid');
    wx.chooseImage({
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        wx.showLoading({
          title: '上传中',
        });
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        let filePath = res.tempFilePaths[0];
        const name = Math.random() * 1000000;
        const cloudPath = name + filePath.match(/\.[^.]+?$/)[0]
        wx.cloud.uploadFile({
          cloudPath,//云存储图片名字
          filePath,//临时路径
          success: res => {
            console.log('[上传图片] 成功：', res)
            that.setData({
              bigImg: res.fileID,//云存储图片路径,可以把这个路径存到集合，要用的时候再取出来
            });
            let fileID = res.fileID;
            //把图片存到users集合表
            const db = wx.cloud.database();
              db.collection("users").add({
                data: {
                  bigImg: fileID
                },
                success: function () {
                  wx.showToast({
                    title: '图片存储成功',
                    'icon': 'none',
                    duration: 3000
                  })
                },
                fail: function () {
                  wx.showToast({
                    title: '图片存储失败',
                    'icon': 'none',
                    duration: 3000
                  })
                }
              }); 
          },
           fail: e => {
            console.error('[上传图片] 失败：', e)
          },
          complete: () => {
            wx.hideLoading()
          }
        });
      }
    })
  },

小伙伴们可以在官方生成的云开发模板中体验上传图片的功能，这里添加了把上传的图片添加到users集合的能力，其实就是在上传图片成功后把图片云存储的路径在集合里面保存起来，注意，首先要在云开发里面添加一个users集合

ApH7XNtL9S.gif

小程序云开发入门https://www.jianshu.com/p/371ac1f0dbc6
小程序云开发操作集合https://www.jianshu.com/p/1fab91447721