我們在做小程序開發時，難免會遇到圖片上傳的功能，我們如果自己搭建圖片服務器的話，成功太大了，并且還要寫后臺程序來接收上傳的圖片，還要有存儲服務器。好在小程序云開發為我們提供了云存儲的功能，這樣我們就可以輕松的實現小程序圖片的上傳和存儲。

老規矩，先看效果圖

本節知識點

• 1，小程序圖片的選取
• 2，小程序圖片的上傳
• 3，小程序圖片的存儲
• 4，獲取云端圖片并顯示

下面就來具體講解下具體實現步驟

圖片的選擇和上傳

index.wxml文件如下

<view class=’item_root’ bindtap=’chuantupian’>

<text>{{zhaopian}}</text>

<view class=’right_arrow’ />

</view>

index.js文件如下

//上傳圖片

chuantupian() {

let that = this;

let timestamp = (new Date()).valueOf();

wx.chooseImage({

success: chooseResult => {

wx.showLoading({

title: ‘上傳中……’,

})

// 將圖片上傳至云存儲空間

wx.cloud.uploadFile({

// 指定上傳到的云路徑

cloudPath: timestamp + ‘.png’,

// 指定要上傳的文件的小程序臨時文件路徑

filePath: chooseResult.tempFilePaths[0],

// 成功回調

success: res => {

console.log(‘上傳成功’, res)

wx.hideLoading()

wx.showToast({

title: ‘上傳圖片成功’,

})

if (res.fileID) {

that.setData({

zhaopian: ‘圖片如下’,

imgUrl: res.fileID

})

}

},

})

},

})

},

到這里其實我們就可以實現圖片的選取和上傳功能了。

下面講講具體是如何實現的

• 首先我們通過wx.chooseImage來獲取相冊里的圖片
• 再獲取照片成功后，我們用當前時間戳命名圖片，然后使用 wx.cloud.uploadFile方法來實現圖片的上傳
• 在上傳成功后，會有如下回調。下圖中的filenId就是我們在云存儲中的路徑，可以直接用這個路徑來獲取圖片并顯示的。

到這里我們就輕松的實現了小程序圖片上傳的功能，是不是很簡單。

編程小石頭，碼農一枚，非著名全棧開發人員。分享自己的一些經驗，學習心得，希望后來人少走彎路，少填坑。