后台传来图片为stream数据 前端如何显示

src为blob：开头的链接图片

服务端

app.get('/getImg',function(req,response){

    response.set( 'content-type', "image/jpeg" );
    
    var stream = fs.createReadStream( "./1.jpg" );
    
    var responseData = [];//存储文件流
    
    if (stream) {//判断状态
    
        stream.on('data', function (chunk) {
        
            responseData.push(chunk);
            
        });
        
        stream.on('end', function () {
        
            var finalData = Buffer.concat(responseData);
            
            response.write(finalData);
            
            console.log(finalData)
            
            response.end();
            
        });
    }

});

finalData 的结果如下

前端

Headers 数据如下

Preview如下图

Response

调用接口的方法

export function openAlgorithm(data){
  return request({
    url:'/getImg',
    params:data,
    method:'get',
    responseType: "arraybuffer"
  })
}

responseType: “arraybuffer” 这个参数一定不能少 少了这个参数 页面中无法显示我们预期的结果

Base64 显示

$后台将图片读取成二进制格式，前端请求到这些二进制数据，然后将这些二进制数据，转化成Unicode字符串$
$然后把这些转过来的字符串编译成base6格式，之后在和base64格式前缀拼接起来$

     openAlgorithm({ index: val }).then((res) => {
        
        const bytes = new Uint8Array(res.data);
        
        let len = bytes.byteLength;
        
        let storeData = "";
        
        for (let i = 0; i < len; i++) {
        
          storeData += String.fromCharCode(bytes[i]);
          
        }
        
        this.imgurl = "data:image/jpg;base64," + window.btoa(storeData);
        
      });

Uint8Array

数组类型表示一个 8 位无符号整型数组，创建时内容被初始化为 0。创建完后，可以以对象的方式或使用数组下标索引的方式引用数组中的元素。

返回数组中元素的字节数，Uint8Array 中返回 1 字节。

Uint16Array

类型数组表示 16 位无符号整数，按平台字节顺序排列。如果需要控制字节顺序，请使用 DataView 代替。内容被初始化为 0。建立后，就可以使用对象的方法或使用标准数组索引语法（即使用括号表示法）引用数组中的元素。

返回元素大小的数值。在 Uint16Array 情况下为 2。
(数组的字节长度应为2的倍数)

Uint32Array

返回一个数值，代表Uint32Array中单个元素的字节大小。Uint32Array 返回 4。
(数组的字节长度应为4的倍数)

String.fromCharCode

静态 String.fromCharCode() 方法返回由指定的 UTF-16 代码单元序列创建的字符串。

语法

String.fromCharCode(num1[, …[, numN]])

num1, …, numN

一系列 UTF-16 代码单元的数字。范围介于 0 到 65535（0xFFFF）之间。大于 0xFFFF 的数字将被截断。不进行有效性检查。

返回值

一个长度为 N 的字符串，由 N 个指定的 UTF-16 代码单元组成。

描述

该方法返回一个字符串，而不是一个 String 对象。

由于 fromCharCode() 是 String 的静态方法，所以应该像这样使用：String.fromCharCode()，而不是作为你创建的 String 对象的方法。

Window btoa()

btoa() 方法用于创建一个 base-64 编码的字符串。
该方法使用 “A-Z”, “a-z”, “0-9”, “+”, “/” 和 “=” 字符来编码字符串。
base-64 解码使用方法是 atob() 。

Blob 显示

$将请求到的二进制数据，转换成blob对象，再createObjectURL创建一个包含blob对象的url$

Blob 对象表示一个不可变、原始数据的类文件对象

$Blob()构造函数返回一个新的Blob对象。blob的内容由参数数组中给出的值的串联组成。$
$varaBlob=newBlob(array,options);$
$array是一个由ArrayBuffer,ArrayBufferView,Blob,DOMString等对象构成的Array，或者其他类似对象的混合体，它将会被放进Blob。DOMStrings会被编码为UTF-8。$

$options是一个可选的BlobPropertyBag字典，它可能会指定如下两个属性：$

• $type，默认值为""，它代表了将会被放入到blob中的数组内容的MIME类型。$
• $endings，默认值为"transparent"，用于指定包含行结束符/n的字符串如何被写入。它是以下两个值中的一个："native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者"transparent"，代表会保持blob中保存的结束符不变Non-Standard$

createObjectURL

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的 URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的 URL 对象表示指定的 File 对象或 Blob 对象。

返回值

一个DOMString包含了一个对象 URL，该 URL 可用于指定源 object的内容。

     openAlgorithm({ index: val }).then((res) => {
 
        const blob = new Blob([res.data], { type: "image/jpg" })
        
        this.imgurl = (window.URL || window.webkitURL).createObjectURL(blob);
        
        console.log(this.imgurl)
        
      });