使用JS将Base64文本转换为图片文件时前后Base64值不一致问题求助

核心问题修复与排查方向 #

• 修正转换代码的错误语法：File构造函数为同步API，不需要添加await关键字，多余的await会触发隐式Promise包装，可能导致二进制数据出现不可预期的异常，直接删除该行的await即可。
• 统一两端base64格式标准：如果客户端原始base64是带data:[mediatype];base64,前缀的Data URI格式，服务端从文件转码得到的是无前缀的纯base64内容，两者本身就会存在差异。需要统一处理逻辑：要么客户端转File前先去掉base64前缀，要么服务端转码后补充对应前缀再做比对。
• 替换更稳定的转换实现：使用fetch处理base64转Blob的方案兼容性和可控性较低，特殊场景下可能出现编码异常，推荐使用原生atob解码的方式实现，代码示例如下：

function base64ToFile(base64Str, fileName, fileType) {
  // 移除base64前缀（如果存在）
  const pureBase64 = base64Str.replace(/^data:.+;base64,/, '')
  // 解码base64为二进制
  const byteChars = atob(pureBase64)
  const byteArray = new Uint8Array(byteChars.length)
  for (let i = 0; i < byteChars.length; i++) {
    byteArray[i] = byteChars.charCodeAt(i)
  }
  // 生成File对象
  return new File([byteArray], fileName, { type: fileType })
}

// 调用示例
const file = base64ToFile(base64String, 'avatar', 'image/png')

• 排查服务端处理逻辑：确认服务端接收FormData的文件解析组件没有默认开启图片压缩、格式转换等操作，这类处理会修改图片二进制内容，直接导致转码后的base64和原始值不一致。

内容的提问来源于stack exchange，提问作者asif.ibtihaj