node端将二进制流的图片转化为base64字符串图片

1,340 阅读1分钟

最近做平台版的h5遇到一个问题,有一个图片上传后回显的功能,采用的vant-ui uploader组件

支持二进制流和base64图片回显

由于平台版本h5客户端服务器域名下协议为https ,浏览器会将https域名下的http请求也统一转换为https  ,导致图片资源请求在浏览器发送时被修改为了https协议, 而对应的许多学校后台数据服务器为http协议,进而请求不到图片资源,所以采用node请求后台 http 请求在node端不会被修改为https,后台返回二进制流后, 然后在node端将二进制流转换为base64返回客户端

const fetch = require('node-fetch');
//获取图片的后端接口,直接返回二进制流的图片,可以直接赋值给img标签的src属性进行回显
let zp_url = `${baseUrl}/axinsf/sys/downloadFile?file_id=${req.query.file_id}`;
//通过node-fetch去请求图片,拿到二进制流后进行buffer格式转换
let result = await fetch(zp_url, {  method:'GET'  }).
    then((resp) => {  
    return resp.buffer();
})
//最后通过buffer.from  toString('base64')转换为base64字符串,拼接成想要的图片格式
let str = 'data:image/png;base64,' + Buffer.from(result, 'binary').toString('base64');