Express发送二进制Buffer到Angular 9前端接收null故障如何解决

你前端收到null是两个核心问题共同导致的：

• 后端使用了205状态码返回响应：205（Reset Content）的HTTP语义要求客户端重置当前文档视图，所有主流客户端（包括Angular HttpClient）都会直接忽略205响应的响应体内容，哪怕你后端确实返回了Buffer数据。
• 前端Angular请求未指定响应类型：Angular HttpClient默认会把响应内容按JSON格式解析，后端返回的二进制图片数据解析JSON失败就会返回null，你打印的bnVsbA==base64解码后就是字符串null，也验证了这一点。

另外你前端代码里调用res.blob()报错是因为res本身已经是null，自然无法调用该方法。

后端修改（compare2.js） #

1. 将响应状态码改为标准成功状态码200
2. 补充响应的Content-Type头，明确告知前端返回的是jpeg格式图片，避免客户端解析异常
   修改后的接口代码如下：

app.get('/',function(req,res,next)
{
    console.log("What I am sending ",imgBuffer);
    res.status(200)
       .set('Content-Type', 'image/jpeg')
       .send(imgBuffer)
       .end();
});

前端修改 #

第一步：调整请求配置 #

修改你appService中getImgBin方法的请求配置，明确指定响应类型为blob：

// app.service.ts 对应方法修改
getImgBin() {
  // 替换为你的实际接口地址，新增responseType配置
  return this.http.get('http://localhost:3001', { responseType: 'blob' });
}

第二步：调整接收处理逻辑 #

请求返回的结果已经是blob对象，不需要额外调用.blob()方法，直接处理即可：

ImageFromService()
{
  this.appService.getImgBin().subscribe(
    blob => {
      // 方案1：用FileReader转base64，适合需要持久化存储图片字符串的场景
      const reader = new FileReader();
      reader.onload = (event) => {
        this.myimage = reader.result as string;
      }
      reader.readAsDataURL(blob);

      // 方案2：用URL.createObjectURL，性能更高，适合仅前端临时展示的场景
      // 注意：组件销毁时需要调用URL.revokeObjectURL(this.myimage)释放内存，避免泄漏
      // this.myimage = URL.createObjectURL(blob);
    },
    (error) => console.log("ERROR",error),
    () => console.log("Done")
  )
}

内容的提问来源于stack exchange，提问作者Alessandro Cinque