Node与Angular14中MySQL BLOB图片转可显示图片及Buffer解析

一、该格式的名称 #

这是Node.js Buffer对象的字符串化表示。当后端从MySQL读取BLOB类型的图片数据后，将其存储为Node.js的Buffer类型，若未对二进制数据做正确编码处理（比如转成Base64或返回二进制流）就直接序列化返回给前端，就会生成这种以<Buffer 开头、包含十六进制字节序列的字符串格式，本质是图片二进制数据的可读形式。

二、Angular 14中转换为可查看图片的步骤 #

1. 提取十六进制字节数据 #

从返回的字符串中剥离无用前缀后缀，提取纯十六进制字节序列：

// 假设接口返回的图片字段为imageBufferStr
const bufferStr = "<Buffer 89 50 4e 47 0d 0a 1a 0a ...>";
// 提取中间的十六进制字符串
const hexContent = bufferStr
  .replace(/^<Buffer\s+/, '') // 移除开头的"<Buffer "
  .replace(/\s+.*>$/, '')     // 移除结尾的" ... N more bytes>"部分
  .replace(/\s+/g, '');       // 去掉所有空格，拼接成连续的十六进制字符串

2. 转换为Uint8Array #

将十六进制字符串转换为二进制字节数组：

// 把十六进制字符串按每两位分割，转成十进制数字，组成Uint8Array
const byteArray = new Uint8Array(
  hexContent.match(/.{1,2}/g)?.map(hex => parseInt(hex, 16)) || []
);

3. 生成可预览的图片URL #

将字节数组转为Blob，再通过URL.createObjectURL生成图片的本地预览地址：

// 注意：这里的type要和实际图片类型匹配，比如JPG用"image/jpeg"，PNG用"image/png"
const imageBlob = new Blob([byteArray], { type: 'image/png' });
this.imageUrl = URL.createObjectURL(imageBlob);

4. 在模板中展示图片 #

在组件模板中直接使用生成的URL：

<img [src]="imageUrl" alt="上传的图片" />

5. 清理资源（避免内存泄漏） #

组件销毁时记得释放生成的URL资源：

import { OnDestroy } from '@angular/core';

export class YourComponent implements OnDestroy {
  imageUrl?: string;

  ngOnDestroy(): void {
    if (this.imageUrl) {
      URL.revokeObjectURL(this.imageUrl);
    }
  }
}

内容的提问来源于stack exchange，提问作者Tanish Gupta