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

此文為「60 節實戰課微信小程式開發視頻教程」的第 51 小節內容，如果需要查看視頻版本的實戰操作，請直接跳至文章的最后部分查看，

1.云開發圖片空間簡介

在之前的文章微信小程式開發平臺新功能「云開發」快速上手體驗中我們簡要介紹了騰訊官方給所有的微信小程式開發提供的云開發的主要功能點，主要包含了下面幾個大的功能，

目前提供三大基礎能力支持：
云函式：在云端運行的代碼，微信私有協議天然鑒權，開發者只需撰寫自身業務邏輯代碼
資料庫：一個既可在小程式前端操作，也能在云函式中讀寫的 JSON 資料庫
檔案存盤：在小程式前端直接上傳/下載云端檔案，在云開發控制臺可視化管理

對于一般的圖片上傳功能開發，我們一般需要實作如下幾個技術點：

后臺服務器的購買；
API 域名的購買與配置；
API 功能的開發；
圖片空間的邏輯處理以及合理管理；
配置圖片 CDN 加速圖片加載效率，

而當我們使用騰訊提供的云開發功能時，只需要幾行代碼即可在微信小程式里實作完整的圖片上傳邏輯，非常地方便、高效，

2.圖片上傳的代碼實作

使用騰訊云開發實作圖片上傳的主要業務邏輯如下：

通過 wx.chooseImage 方法讓用戶選擇設備中的圖片資源；
通過 wx.cloud.uploadFile 方法實作圖片的上傳，上傳至騰訊提供的免費 5G 空間中；
通過 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)
      }
    })
  },

/* 這部分比較簡單，直接在頁面讀取加載到的圖片鏈接即可 */
  onl oad: function (options) {

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

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

圖片在云開發管理器中的管理與查看，可以看到圖片已成功上傳，

上傳后跳轉的頁面展示，

3.視頻版實戰演示

如果你需要更加直觀地查看此功能的視頻教程，請跳轉至此集的 B 站查看，

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

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

DevOpen.Club Pro 高質量軟體開發分享討論群，匯聚了近 1000 多名各行各業的軟體開發人員，是供朋友們分享高質量資源、討論軟體開發問題解決方案、尋求范訓專案合作伙伴的干貨社區，

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

DevOpenClub 知識星球

社群中正在更新的原創視頻教程 & 范訓專案進度

所有視頻課程資源您可以在社區置頂帖中查看；
結合之前的 60 集微信小程式基礎課程，再次更新 20 集微信天氣預報小程式實戰開發原創實戰視頻課程；
一小時快速上手 WordPress 站點搭建：最好的 CMS 管理系統，課程從安裝部署到定制開發進行了詳細的實戰講解；
30 分鐘上手 Python 爬蟲：30 分鐘帶你快速上手 Python，詳解了爬蟲底層的原理與實作方法、BeautifulSoup 框架以及實戰爬蟲的實作，快速助力你成為一名大資料工程師；
80 節實戰課精通 React Native 開發：我出版的書籍《React Native 精解與實戰》配套視頻教程；
TypeScript 快速入門上手實戰：前端開發入門必備；
編程大世界：軟體開發基礎知識通解，帶你進入軟體開發的大世界；
我們的微信群中范訓出來的一個團隊，做了一個服務于倫敦租房的小程式專案，已上線，在持續迭代；
付費資料介面的無限制免費呼叫權限，已在微信群中分配了最高權限的 Key，

DevOpenClub Pro 社群指南

每日分享高質量的技術開發頭條資訊與資源；
遇到任何技術問題都可以進行快速提問、討論交流；
永久獲取每年原創的開發視頻教程第一手資源更新；
獲取其他高質量軟體開發行業新聞、技術文章、教學視頻分享；
群中認識更多的朋友以及分享合作開發專案的機會；
認識更多的行業朋友，或者交流自己的創業小專案；
交流與分享技術面試心得；
高質量、有價值的社區永遠都不會是你所在的 QQ 群或微信群，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/147284.html

標籤：JavaScript

上一篇：疫情之后技術人的思考

下一篇：解決egg-mysql連接資料庫報錯問題

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

1.云開發圖片空間簡介

2.圖片上傳的代碼實作

3.視頻版實戰演示