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

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

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

本節(jié)知識(shí)點(diǎn)

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

下面就來(lái)具體講解下具體實(shí)現(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: '上傳中。。。',
    })
    // 將圖片上傳至云存儲(chǔ)空間
    wx.cloud.uploadFile({
     // 指定上傳到的云路徑
     cloudPath: timestamp + '.png',
     // 指定要上傳的文件的小程序臨時(shí)文件路徑
     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
       })
      }

     },
    })
   },
  })
 },

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

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

• 首先我們通過(guò)wx.chooseImage來(lái)獲取相冊(cè)里的圖片
• 再獲取照片成功后，我們用當(dāng)前時(shí)間戳命名圖片，然后使用 wx.cloud.uploadFile方法來(lái)實(shí)現(xiàn)圖片的上傳
• 在上傳成功后，會(huì)有如下回調(diào)。下圖中的filenId就是我們?cè)谠拼鎯?chǔ)中的路徑，可以直接用這個(gè)路徑來(lái)獲取圖片并顯示的。

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

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

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

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

·