快速高效實現微信小程序圖片上傳與騰訊免費5G存儲空間的使用

本文介紹瞭如何在微信小程序開發中使用騰訊官方提供的雲開發功能快速實現圖片的上傳與存儲，以及介紹雲開發的 5G 存儲空間的基本使用方法，這將大大提升微信小程序的開發效率

對於通常的圖片上傳功能開發，咱們通常須要實現以下幾個技術點：

1. 後臺服務器的購買；
2. API 域名的購買與配置；
3. API 功能的開發；
4. 圖片空間的邏輯處理以及合理管理；
5. 配置圖片 CDN 加速圖片加載效率。

而當咱們使用騰訊提供的雲開發功能時，只須要幾行代碼便可在微信小程序裏實現完整的圖片上傳邏輯，很是地方便、高效。

2.圖片上傳的代碼實現

使用騰訊雲開發實現圖片上傳的主要業務邏輯以下：

1. 經過 wx.chooseImage 方法讓用戶選擇設備中的圖片資源；
2. 經過 wx.cloud.uploadFile 方法實現圖片的上傳，上傳至騰訊提供的免費 5G 空間中；
3. 經過 wx.cloud.uploadFile 的回調事件處理雲端返回的圖片資源 ID、連接等相關屬性，進行後續地處理。

下面咱們直接看這三個業務邏輯的代碼部分。

 /* 圖片的選擇與上傳部分邏輯 */
 // 上傳圖片
  doUpload: function () {
    // 選擇圖片
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {

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

        const filePath = res.tempFilePaths[0]
        
        // 上傳圖片
        // 這部分能夠自行處理圖片的命名方式，這裏圖片進行了固定命名爲 my-image
        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)
      }
    })
  },

這部分比較簡單，直接在頁面讀取加載到的圖片連接便可

onLoad: function (options) {

    const {
      fileID,
      cloudPath,
      imagePath,
    } = app.globalData

    this.setData({
      fileID,
      cloudPath,
      imagePath,
    })
  },

後記：圖片在雲開發管理器中的管理與查看，能夠看到圖片已成功上傳。