base64转图片Buffer再转回base64时格式丢失、后缀缺失问题求助

问题根源 #

• 你传入的image是带data:[mime];base64,前缀的Data URI字符串，这个前缀本身不属于Base64编码的有效内容，Buffer.from(xxx, 'base64')会自动过滤字符串中所有非Base64标准字符（包括:、/、;、,），导致前缀的特殊符号丢失，转回Base64时就变成了无分隔符的dataimage/pngbase64。
• Base64末尾的==是长度填充符，Buffer.from处理时会自动丢弃填充符，若你没有单独保存前缀、直接把带前缀的完整字符串当Base64内容处理，整体长度计算错误，转回时就会出现末尾填充符缺失的问题。

最优解决方案 #

方案1：拆分Data URI前缀和实际编码内容，分开处理（推荐）

resolve: async (_, args) => {
  const { image, name, manufacturerId, identifiers } = args.input;
  // 拆分前缀和实际Base64内容
  const [prefix, base64Content] = image.split(',');
  // 提取MIME类型，后续取数据的时候可以直接用
  const mimeType = prefix.match(/data:(.*);base64/)[1];
  // 只把实际的图片编码内容转Buffer
  const buffedImage = Buffer.from(base64Content, 'base64');

  return await prisma.model.create({
    data: {
      // 新增字段存MIME类型，若所有图片格式固定也可省略该字段硬编码
      imageMimeType: mimeType,
      image: buffedImage,
      name,
      identifiers,
      manufacturer: {
        connect: {
          id: manufacturerId,
        },
      },
    },
  });
}

取数据返回给前端时手动拼回完整的Data URI即可：

// 查询到数据后拼接
const fullBase64 = `data:${item.imageMimeType};base64,${item.image.toString('base64')}`

方案2：直接存完整Data URI字符串

如果不需要对图片二进制做额外处理，直接把前端传的完整Base64字符串存在TEXT/LONGTEXT类型的字段中即可，完全不需要转Buffer，从根源避免转码异常。

临时补丁的风险 #

• 硬编码替换dataimage/pngbase64仅支持png格式图片，后续上传jpg、webp等格式会直接失效
• 硬加g==仅巧合适配你当前测试的图片，换其他图片末尾填充符可能是=、==或者无填充符，会直接导致图片损坏。

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