如何用JavaScript Buffer解码PostgreSQL bytea[]为初始Base64图片URI？

错误根源 #

你在存储时犯了两个关键错误：

• 直接将包含data:image/jpeg;base64,前缀的完整Base64字符串转成字节存入bytea[]，导致数据库中存储的字节不仅包含图片二进制数据，还包含前缀的文本字节。
• 取回后直接对整个Buffer转Base64，得到的是包含前缀文本的无效Base64，自然无法解析为图片。

正确处理流程 #

1. 存储阶段修正 #

前端发送数据前，必须剥离Base64前缀，只保留纯图片的Base64部分，再转成二进制数据：

// 原始带前缀的图片URI
const imageUri = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD...";
// 拆分出纯Base64字符串
const pureBase64 = imageUri.split(',')[1];
// 转换为Uint8Array（适配后端bytea[]的接收格式）
const imageBinary = Uint8Array.from(atob(pureBase64), char => char.charCodeAt(0));
// 将imageBinary存入数据库的bytea[]列

2. 取回数据后的正确转换 #

从后端拿到[{type: 'Buffer', data: Array(xxx)}, ...]格式的数据后，按以下步骤恢复图片URI：

// 后端返回的图片Buffer数组
const imageBufferList = [{type: 'Buffer', data: [/* 字节数组 */]}, ...];

const imageUris = imageBufferList.map(bufferItem => {
  // 将字节数组转为Uint8Array
  const uint8Array = new Uint8Array(bufferItem.data);
  // 转换为Base64字符串
  const base64Str = btoa(String.fromCharCode(...uint8Array));
  // 拼接前缀生成可显示的图片URI
  return `data:image/jpeg;base64,${base64Str}`;
});

3. 已错误存储数据的补救方案 #

如果数据库里已经存了带前缀的无效数据，可以在前端取回后逆向修正：

const fixedImageUris = imageBufferList.map(bufferItem => {
  // 将Buffer转成原始的带前缀字符串
  const fullStr = Buffer.from(bufferItem.data).toString('utf8');
  // 拆分出纯Base64部分
  const pureBase64 = fullStr.split(',')[1];
  // 重新生成有效图片URI
  return `data:image/jpeg;base64,${pureBase64}`;
});

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