记微信小程序图片无法直接使用HTTP地址或GET方法时展示与预览问题（base64）

背景

目前在着手做一个微信小程序项目，由于第一次接触小程序，以及限制条件较多，因此遇到了一些较为难搞的问题。

问题描述

由于内部限制，所有后端接口的请求必须携带某个header参数，以标识请求来源（硬性要求），在查看微信开放文档后，就出现了以下几个问题：

Image标签展示

image标签的问题比较好处理，一般在src中放的是http地址，但在这项目中无法直接给出链接，只需要在js中请求到base64数据后赋给src即可。

wx.previewImage预览

预览的问题比较麻烦，官方文档的主要参数如下，没有给我们的请求地址提供塞header的地方。

wx.previewImage({
  current: '', // 当前显示图片的http链接
  urls: [] // 需要预览的图片http链接列表
})

以下分两种情况考虑：

第一次上传

比较好理解，利用小程序的chooseImage方法获取到临时文件目录，然后previewImage方法中直接浏览本地目录文件地址即可。

  choosePhoto: function (e) {
    var _this = this;
    wx.chooseImage({
      count: 4,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        // 临时地址
        var tempFilePaths = res.tempFilePaths;
        var imgs;
        tempFilePaths.forEach(function (e) {
          imgs.push(e);
        });
        _this.setData({
          imgs: imgs
        });
      }
    });
  },

 

详情预览

详情稍微复杂一点，由于无法直接获取到图片地址，后台通过接口获取到的图片的base64编码后的数据。

此处先调用wx.base64ToArrayBuffer方法，将base64转换为buffer，然后将文件储存到微信本地目录下，再通过获取到的本地地址进行浏览。

存在的问题是会占用微信本地缓存，可能后续需要进行文件的删除处理。(6月24日更新：PC版微信更新至最新版本后无法写入二进制文件，不知道是什么问题，这改成直接写入base64，其实我也不记得为什么当初不直接写base64了hhhh)

  previewPhoto: function (e) {
    var name = e.currentTarget.dataset.name;
    var base64 = this.data.imgs;
    // 取代到base64的前缀，此处转换不需要前缀
    var data = url[e.target.dataset.index].replace('data:image/jpeg|png|jpg|png;base64,', '');

    wx.showLoading({
      title: '加载中',
    })

    // var arrayBuffer = wx.base64ToArrayBuffer(data);

    let fs = wx.getFileSystemManager();
　　 // 临时地址
    const filePath = `${wx.env.USER_DATA_PATH}/${name}${e.target.dataset.index}.png`;
    // 将buffer写入本地地址
    fs.writeFileSync(filePath, data, 'base64');

    wx.hideLoading();
    // 预览本地临时文件
    wx.previewImage({
      current: filePath,
      urls: [filePath]
    });
    // 删除本地文件
    // fs.unlinkSync(filePath);

  },

 

setData赋值

未解决，小程序之前限制每次set数据不得超过1024kb，但是base64数据可能会超过此大小，虽然现在好像并非强制，但是目前也只能尽量压缩文件。