小程序中图片转 base64 编码格式

羽筠

已于 2023-05-05 11:26:53 修改

阅读量1k

点赞数

分类专栏：小程序文章标签：小程序

于 2023-05-04 17:30:36 首次发布

本文链接：https://blog.youkuaiyun.com/qq_16494241/article/details/130491529

版权

小程序专栏收录该内容

21 篇文章

订阅专栏

该文展示了如何在微信小程序中将本地及上传的图片转换为base64格式，并使用wx.previewImage进行大图预览。首先，通过wx.getFileSystemManager().readFileSync将本地图片转为base64，然后利用wx.previewImage进行预览。其次，利用wx.chooseMedia选择图片后，读取tempFilePath并转换为base64。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例：小程序项目内部图片转 base64 图片并使用 wx.previewImage 查看大图

let base64Img = 'data:image/png;base64,' + wx.getFileSystemManager().readFileSync('images/aaa.png','base64');
wx.previewImage({
  urls: [base64Img],
  current: base64Img
});

例：小程序中上传的图片转 base64 图片

wx.chooseMedia({
  count: 1,
  mediaType: ['image'],
  sourceType: ['album', 'camera'],
  // sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
  sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
  success: (res) => {
    wx.showLoading({
      title: "上传中",
      mask: true
    });
    wx.getFileSystemManager().readFile({
      filePath: res.tempFiles[0].tempFilePath, //选择图片返回的相对路径
      encoding: 'base64', //编码格式
      success:(res) =>{
        let baseImg = 'data:image/png;base64,' + res.data;
        console.log(baseImg);
        wx.hideLoading();
      }
    })
  }
})