支付宝小程序预览base64图片（解决my.previewImage不支持预览base64图片的问题）

blueSky-fan

于 2023-08-25 17:39:13 发布

阅读量395

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/lff18277233091/article/details/132500450

版权

参考链接：微信小程序预览base64图片-腾讯云开发者社区-腾讯云

my.previewImage不支持base64格式预览图片，要实现预览base64的图片，需要用到解决办法：把base64作为临时文件存到本地，然后预览，预览结束时删除临时文件

Page({
  data: {
    //本机的临时文件路径
    localTempImgUrl: ''
  },
  onShow: function() {
    // 在这里删除临时文件
    var localTempImgUrl = this.data.localTempImgUrl;
    if(localTempImgUrl) {
      var fs = wx.getFileSystemManager();
      fs.unlinkSync(localTempImgUrl);
      fs.closeSync;
    }
  },
  //预览图片
  onPreviewImage() {
    var base64 = "data:image/PNG;base64," + this.data.base64;
    var imgPath = my.env.USER_DATA_PATH + '/photo' + Date.parse(new Date()) + '.png';
    var imageData = base64.replace(/^data:image\/\w+;base64,/, "");
    var fs = my.getFileSystemManager();
    fs.writeFileSync(imgPath, imageData, "base64");
    fs.close;
    this.setData({
      localTempImgUrl: imgPath
    })
    wx.previewImage({
      urls: [imgPath] // 需要预览的图片http链接列表
    })
  }
})