雲開發-官方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，路徑，圖片

在雲開發控制檯也可看到咱們剛上傳的圖片