Base64转文件图片提交仅在Safari中失败的原因排查

我之前也踩过Safari处理Base64转File对象的坑，结合你的场景来看，大概率是Safari对Base64格式的严格校验、以及Blob/File对象构造逻辑的兼容性差异导致的，以下是具体原因和解决办法：

核心原因 #

1. Base64字符串格式兼容性问题
   Firefox对Base64字符串的容错性更高，比如会自动忽略字符串中的换行、空格等冗余字符；但Safari对格式要求极为严格，如果从IndexedDB读取的Base64带有隐形换行（比如存储时意外引入的）、或者前缀处理不彻底，就会导致解码失败，最终生成0KB的空文件。

2. Blob/File构造的实现差异
   直接用atob()解码Base64后转Blob的方式，在Safari中处理较大的Base64字符串时，可能会出现编码截断或字节解析错误，而Firefox的字节处理逻辑更宽松，不会触发这个问题。

无需修改后端的解决步骤 #

1. 严格清理Base64字符串 #

先对从IndexedDB取出的Base64做标准化处理，移除所有冗余内容：

function cleanBase64(base64Str) {
  // 移除data URI前缀（如果有的话）
  const withoutPrefix = base64Str.replace(/^data:image\/\w+;base64,/, '');
  // 移除所有空格、换行符等非Base64字符
  return withoutPrefix.replace(/\s/g, '');
}

2. 用Uint8Array分块构造File对象 #

避免直接用字符串转Blob，改用字节数组分块处理，这是Safari下最可靠的转换方式：

function base64ToSafeFile(base64Str, filename, mimeType) {
  const cleanStr = cleanBase64(base64Str);
  const byteChars = atob(cleanStr);
  const byteArrays = [];

  // 分块处理，避免大字符串解析溢出
  for (let offset = 0; offset < byteChars.length; offset += 512) {
    const slice = byteChars.slice(offset, offset + 512);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    byteArrays.push(new Uint8Array(byteNumbers));
  }

  const blob = new Blob(byteArrays, { type: mimeType });
  return new File([blob], filename, { type: mimeType });
}

3. 验证AJAX发送逻辑 #

确保在FormData中正确追加File对象，并且请求头符合后端预期：

// 示例AJAX发送代码
const formData = new FormData();
const file = base64ToSafeFile(yourBase64FromIndexedDB, "image.png", "image/png");
formData.append("file", file);

fetch("/your-api-endpoint", {
  method: "POST",
  body: formData
})
.then(res => res.json())
.catch(err => console.error(err));

额外注意点 #

• 检查IndexedDB存储的Base64是否完整：Safari的IndexedDB对字符串存储的长度限制和Firefox一致，但如果存储时使用了异步分片写入，可能会出现截断，建议存储前先验证Base64的完整性。
• 测试不同图片尺寸：小图可能正常，但大图更容易触发Safari的字节解析问题，务必覆盖多种场景测试。

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