云开发-官方demo-云存储示例

还是在官方的demo上做演示。

微信官网对云存储的定义不赘述，见 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage.html

直接上手撕代码，主页面，上的一个上传图片的入口，绑定了doUpload方法

此方法在同文件夹下的js文件中定义

doUpload: function () {
    // 选择图片
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {

        wx.showLoading({
          title: '上传中',
        })

        const filePath = res.tempFilePaths[0]
        
        // 上传图片
        const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[0]
        wx.cloud.uploadFile({
          cloudPath,
          filePath,
          success: res => {
            console.log('[上传文件] 成功：', res)

            app.globalData.fileID = res.fileID
            app.globalData.cloudPath = cloudPath
            app.globalData.imagePath = filePath
            
            wx.navigateTo({
              url: '../storageConsole/storageConsole'
            })
          },
          fail: e => {
            console.error('[上传文件] 失败：', e)
            wx.showToast({
              icon: 'none',
              title: '上传失败',
            })
          },
          complete: () => {
            wx.hideLoading()
          }
        })

      },
      fail: e => {
        console.error(e)
      }
    })
  }

上传完成后跳转到了../storageConsole/storageConsole页面，在此页面展示了id，路径，图片

在云开发控制台也可看到我们刚上传的图片

 

转载于:https://my.oschina.net/u/3301706/blog/3090168