記微信小程序圖片無法直接使用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數據可能會超過此大小，雖然現在好像並非強制，但是目前也只能盡量壓縮文件。