5行代碼實現微信小程序圖片上傳與騰訊免費5G存儲空間的使用

本文介紹瞭如何在微信小程序開發中使用騰訊官方提供的雲開發功能快速實現圖片的上傳與存儲，以及介紹雲開發的 5G 存儲空間的基本使用方法，這將大大提升微信小程序的開發效率，同時也是微信小程序系列教程的視頻版更新的文字版本摘要。

此文爲 「60 節實戰課微信小程序開發視頻教程」 的第 51 小節內容，若是須要查看視頻版本的實戰操做，請直接跳至文章的最後部分查看。

1.雲開發圖片空間簡介

在以前的文章 微信小程序開發平臺新功能「雲開發」快速上手體驗 中咱們簡要介紹了騰訊官方給全部的微信小程序開發提供的雲開發的主要功能點，主要包含了下面幾個大的功能。

目前提供三大基礎能力支持：
雲函數：在雲端運行的代碼，微信私有協議自然鑑權，開發者只需編寫自身業務邏輯代碼
數據庫：一個既可在小程序前端操做，也能在雲函數中讀寫的 JSON 數據庫
文件存儲：在小程序前端直接上傳/下載雲端文件，在雲開發控制檯可視化管理

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

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,
    })
  },

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

上傳後跳轉的頁面展現。

3.視頻版實戰演示

若是你須要更加直觀地查看此功能的視頻教程，請跳轉至此集的 B 站查看。

bilibili - 微信小程序開發視頻教程 #051-開發平臺「雲開發」圖片上傳功能實戰

此係列課程的完整更新大綱請參見：[原創] 微信小程序開發視頻教程
加入社羣，與 1000 多位朋友們共同成長

DevOpen.Club Pro 高質量軟件開發分享討論羣，匯聚了近 1000 多名各行各業的軟件開發人員，是供朋友們分享高質量資源、討論軟件開發問題解決方案、尋求孵化項目合做夥伴的乾貨社區。

任何技術都不是限制，咱們最終目的是將技術轉化成收入，實現財務自由。

社羣中正在更新的原創視頻教程 & 孵化項目進度

1. 全部視頻課程資源您能夠在社區置頂帖中查看；

2. 結合以前的 60 集微信小程序基礎課程，再次更新 20 集微信天氣預報小程序實戰開發原創實戰視頻課程；

3. 一小時快速上手 WordPress 站點搭建：最好的 CMS 管理系統，課程從安裝部署到定製開發進行了詳細的實戰講解；

4. 30 分鐘上手 Python 爬蟲：30 分鐘帶你快速上手 Python，詳解了爬蟲底層的原理與實現方法、BeautifulSoup 框架以及實戰爬蟲的實現，快速助力你成爲一名大數據工程師；

5. 80 節實戰課精通 React Native 開發：我出版的書籍《React Native 精解與實戰》配套視頻教程；

6. TypeScript 快速入門上手實戰：前端開發入門必備；

7. 編程大世界：軟件開發基礎知識通解，帶你進入軟件開發的大世界；

8. 咱們的微信羣中孵化出來的一個團隊，作了一個服務於倫敦租房的小程序項目，已上線，在持續迭代；

9. 付費數據接口的無限制免費調用權限，已在微信羣中分配了最高權限的 Key。

DevOpenClub Pro 社羣指南

1. 每日分享高質量的技術開發頭條信息與資源；

2. 遇到任何技術問題均可以進行快速提問、討論交流；

3. 永久獲取每一年原創的開發視頻教程第一手資源更新；

4. 獲取其餘高質量軟件開發行業新聞、技術文章、教學視頻分享；

5. 羣中認識更多的朋友以及分享合做開發項目的機會；

6. 認識更多的行業朋友，或者交流本身的創業小項目；

7. 交流與分享技術面試心得；

8. 高質量、有價值的社區永遠都不會是你所在的 QQ 羣或微信羣。