node端将二进制文件从后端获取到并转换成base64发送给前端

遇到了一个场景:用node做中间件,后端传过来了一个图片的二进制流,需要node端对其转码成base64再传给前端

错误写法:

const res = await netWork.get('/auth/verifycode')//传输后端的网络请求 得到二进制文件
let imgPrefix = `data:image/${imgType};base64,`
let buffer = new Buffer(res.data).toString('base64')
let imgUrl = imgPrefix+buffer
throw new Success(imgUrl)

这个写法,虽然可以得到base64,但是无法显示,因为格式有误,原因如下:

在我们发送一个http请求的时候,可以限制返回时的responseType,默认为document 问题就出在这个document上

我们的二进制字符串在res.data得到的时候已经被转成字符串了,此时已经进行了一个转码,把这个已经改变了的字符串再转换成buffer,然后再转成base64,自然是没有办法得到正确的图片的

如果要得到正确的图片 我们需要加上responseType:‘arraybuffer’,加上之后返回的data就是一个buffer数组,这个数组是直接由二进制转换得到的,没有经过二次转码,然后使用toString(‘base64’),即可得到正确的图片

代码如下:

const imgType = 'png'
  const res = await netWork.get('/auth/verifycode',{
    responseType: "arraybuffer"//很重要
  })
  let imgPrefix = `data:image/${imgType};base64,`
  let imgUrl = imgPrefix+res.data.toString('base64')
  throw new Success(imgUrl)