小程序圖片上傳，存儲，獲取，顯示

咱們在作小程序開發時，不免會遇到圖片上傳的功能，咱們若是本身搭建圖片服務器的話，成功太大了，而且還要寫後臺程序來接收上傳的圖片，還要有存儲服務器。好在小程序雲開發爲咱們提供了雲存儲的功能，這樣咱們就能夠輕鬆的實現小程序圖片的上傳和存儲。

老規矩，先看效果圖

本節知識點

• 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就是咱們在雲存儲中的路徑，能夠直接用這個路徑來獲取圖片並顯示的。

到這裏咱們就輕鬆的實現了小程序圖片上傳的功能，是否是很簡單。

有任何關於編程的問題均可以加我微信2501902696（備註編程開發）

編程小石頭，碼農一枚，非著名全棧開發人員。分享本身的一些經驗，學習心得，但願後來人少走彎路，少填坑。

完整的源碼能夠加老師微信獲取，也能夠關注下面老師公號，回覆「源碼」 獲取。