微信小程序圖片流&本地圖片轉base64處理方案

圖片流轉base64展示

const that = this;
request({
   url: 'XXXXX',
   method: 'GET',
   responseType: 'arraybuffer',
   success: function(res) {
     const base64 = wx.arrayBufferToBase64(res);
     that.setData({
       userImageBase64: `data:image/jpg;base64,${base64}`
     });
   }
}); 

wxml展示圖片

<image src='{{userImageBase64}}' style='width: 100rpx; height: 100rpx;' />

本地圖片轉base64

wx.chooseImage({
  success (res) {
    // tempFilePath可以作爲img標籤的src屬性顯示圖片
    const tempFilePaths = res.tempFilePaths;
    const fileManager = wx.getFileSystemManager();
    const base64 = fileManager.readFileSync(tempFilePaths[0], 'base64');
    console.log('=============================', base64);
  },
  fail () {
    wx.showToast({
      title: '獲取圖片失敗',
      icon: 'success',
      duration: 2000
    })
  }
})

• wx.chooseImage：獲取本地圖片
• wx.getFileSystemManager：創建文件管理類
• readFileSync：讀取本地文件，直接得到base64

大家在看

• 面試官：遇到一個從沒接觸過的問題你是怎麼解決的？
• 開發小程序分頁功能時的這些坑你遇到過嗎？
• live-server本地搭建臨時服務

關注公衆號： 頁面仔小楊 【實戰乾貨、原創分享】