本文介紹瞭如何在微信小程式開發中使用騰訊官方提供的雲開發功能快速實現圖片的上傳與存儲，以及介紹雲開發的 5G 存儲空間的基本使用方法，這將大大提高微信小程式的開發效率。 ...
本文介紹瞭如何在微信小程式開發中使用騰訊官方提供的雲開發功能快速實現圖片的上傳與存儲，以及介紹雲開發的 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)
}
})
},/* 這部分比較簡單，直接在頁面讀取載入到的圖片鏈接即可 */
onLoad: function (options) {
const {
fileID,
cloudPath,
imagePath,
} = app.globalData
this.setData({
fileID,
cloudPath,
imagePath,
})
},圖片在雲開發管理器中的管理與查看，可以看到圖片已成功上傳。
上傳後跳轉的頁面展示。
3.視頻版實戰演示
如果你需要更加直觀地查看此功能的視頻教程，請跳轉至此集的 B 站查看。
bilibili - 微信小程式開發視頻教程 #051-開發平臺「雲開發」圖片上傳功能實戰
此系列課程的完整更新大綱請參見：[原創] 微信小程式開發視頻教程
加入社群，與 1000 多位朋友們共同成長
DevOpen.Club Pro 高質量軟體開發分享討論群，匯聚了近 1000 多名各行各業的軟體開發人員，是供朋友們分享高質量資源、討論軟體開發問題解決方案、尋求孵化項目合作伙伴的乾貨社區。
任何技術都不是限制，我們最終目的是將技術轉化成收入，實現財務自由。
社群中正在更新的原創視頻教程 & 孵化項目進度
- 編程大世界：軟體開發基礎知識通解，帶你進入軟體開發的大世界；
- 80 節實戰課精通 React Native 開發：我出版的書籍《React Native 精解與實戰》配套視頻教程；
- 微信小程式開發視頻教程：最實戰的小程式開發視頻教程，重新規劃課程內容增加至 60 小節；
- 50 個 Chrome Developer Tools 必備技巧：前端開發人員必備技能點；
- 我們的微信群中孵化出來的一個團隊，在做一個服務於倫敦的小程式項目；
- 付費數據介面的無限制免費調用許可權，已在微信群中分配了最高許可權的 Key。
DevOpenClub Pro 社群指南
- 每日分享高質量的技術開發頭條信息與資源；
- 遇到任何技術問題都可以進行快速提問、討論交流；
- 永久獲取每年原創的開發視頻教程第一手資源更新；
- 獲取其他高質量軟體開發行業新聞、技術文章、教學視頻分享；
- 群中認識更多的朋友以及分享合作開發項目的機會；
- 認識更多的行業朋友，或者交流自己的創業小項目；
- 交流與分享技術面試心得；
- 高質量、有價值的社區永遠都不會是你所在的 QQ 群或微信群。
