小程序圖片上傳，存儲，獲取，顯示
2021-08-08 15:37:08

我們在做小程序開發(fā)時，難免會遇到圖片上傳的功能，我們?nèi)绻约捍罱▓D片服務(wù)器的話，成功太大了，并且還要寫后臺程序來接收上傳的圖片，還要有存儲服務(wù)器。好在小程序云開發(fā)為我們提供了云存儲的功能，這樣我們就可以輕松的實現(xiàn)小程序圖片的上傳和存儲。

老規(guī)矩，先看效果圖

本節(jié)知識點

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

下面就來具體講解下具體實現(xiàn)步驟

圖片的選擇和上傳

• 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],
     // 成功回調(diào)
     success: res => {
      console.log('上傳成功', res)
      wx.hideLoading()
      wx.showToast({
       title: '上傳圖片成功',
      })
      if (res.fileID) {
       that.setData({
        zhaopian: '圖片如下',
        imgUrl: res.fileID
       })
      }

     },
    })
   },
  })
 },

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

下面講講具體是如何實現(xiàn)的

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

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

有任何關(guān)于編程的問題都可以加我微信2501902696（備注編程開發(fā)）

編程小石頭，碼農(nóng)一枚，非著名全棧開發(fā)人員。分享自己的一些經(jīng)驗，學(xué)習(xí)心得，希望后來人少走彎路，少填坑。

完整的源碼可以加老師微信獲取，也可以關(guān)注下面老師公號，回復(fù)“源碼” 獲取。

·