微信小程序图片流&本地图片转base64处理方案

最新推荐文章于 2025-09-19 16:47:59 发布

原创最新推荐文章于 2025-09-19 16:47:59 发布 · 置顶 · 725 阅读

0 ·

CC 4.0 BY-SA版权

小程序开发专栏收录该内容

4 篇文章

订阅专栏

本文介绍了微信小程序中如何将图片流转为base64格式进行展示。通过wx.chooseImage获取本地图片，利用wx.getFileSystemManager读取文件并转化为base64。同时，文章还提及了读者可能感兴趣的面试技巧、小程序开发经验及本地服务搭建。

172

图片流转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
    })
  }
})