环境介绍

1. 前端：mpvue框架
2. 后端：Koa 框架

这两天总是卡在二进制图片流转换成 base64格式的问题上，导致一直办法在前端显示 base64格式的图片。

所以今天换个'快糙猛'的方式实现。再借由这个实现推导出问题所在。这里不再赘述如何获取 access_token。

wx.request({
      url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${你自己的 access_token}'
      method: 'POST',
      data: {'scene': '10010', 'page': 'pages/index/main'},
      responseType: 'arraybuffer',
      success: function (res) {
        if (res.statusCode === 200) {
          let base64 = wx.arrayBufferToBase64(res.data)
          // console.log(base64)
          that.imageURL = 'data:image/jpeg;base64,' + base64
          console.log(that.imageURL)
        }
      }
})

上面这段代码是可是获取到小程序码的。但是这个请求正常来讲，应该是放到后端实现的。我的后端选用的是 node，加上不太熟悉如何处理二进制文件。所以总是没有办法生成二维码图片。

问题的关键 是在 axios 中对 responseType 进行设置

这样，我就找到了问题所在，对 responseType 的设置，对代码进行修改后，也可以正确的显示二维码图片了。修改后代码如下

// 获取二维码的接口
router.post('/getQrCode', async (ctx, next) => {
  codeReq = ctx.request.body
  let accessToken;
  let result = await getAccessToken()
  if (result && result.access_token) {
    accessToken = result.access_token
    codeReq.access_token = result.access_token
  }
  let qr = await getQrCode(codeReq)
  ctx.body = qr.toString('base64')
})
//向微信发送请求
async function getQrCode (codeReq='') {
  let qrCode;
  let apiUrl = `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${codeReq.access_token}`;
  let req_setting = {
    responseType: 'arraybuffer'
  }
  let data = {'scene':'1005','page':'pages/index/main'}
  let code_instance = await axios.create(req_setting);
  let result = await code_instance.post(apiUrl,data);
  if (result.status === 200) {
    qrCode = result.data;
  }
  return qrCode;
}