问题描述:
请求后端的数据,返回的是文件流的形式,如下图所示,如何转化为图片格式?
对于这个问题,主要由以下三步来解决:
第一步:要设定请求的 responseType为arraybuffer。把文件流转化成固定的原始二进制数据缓冲区。
第二步:转化为data:image/png;base64,。其中data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。
第三步:将base64字符赋值到img的src中。
代码示例:
codeImgPost(`${BASE_PATH}/web/imgcode?now=`+new Date().getTime()).then(response => {
return 'data:image/png;base64,' + btoa(
new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
)
}).then(data => {
var code_img = $('.code_img');
code_img.attr('src', data);
code_img.css('width', '90px');
});