JavaScript的File/Blob对象base64编解码及React文件上传实现问询

以下是完全基于浏览器原生API的实现，无第三方依赖，和Python的base64.b64encode、base64.b64decode效果完全对齐。

1. File/Blob转Base64编码（React端上传前用） #

用FileReaderAPI实现，封装为Promise方便异步调用：

// 入参为File或Blob对象，返回Promise，resolve结果为完整base64字符串
const fileToBase64 = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}

// React中使用示例
const handleFileUpload = async (e) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;
  const base64Str = await fileToBase64(selectedFile);
  // 直接将base64Str作为参数传入GraphQL mutation即可
}

2. Base64转Blob/File（解码还原文件用） #

// base64转Blob对象
const base64ToBlob = (base64Str) => {
  // 拆分base64前缀和编码内容
  const [prefix, content] = base64Str.split(',');
  // 提取文件MIME类型
  const mimeType = prefix.match(/:(.*?);/)[1];
  // 解码base64内容
  const decoded = atob(content);
  const u8Arr = new Uint8Array(decoded.length);
  for (let i = 0; i < decoded.length; i++) {
    u8Arr[i] = decoded.charCodeAt(i);
  }
  return new Blob([u8Arr], { type: mimeType });
}

// 若需要还原为File对象，可基于上面的方法封装
const base64ToFile = (base64Str, fileName) => {
  const blob = base64ToBlob(base64Str);
  return new File([blob], fileName, { type: blob.type });
}

注意：如果你的base64字符串不带data:xxx;base64,前缀，解码时可跳过前缀拆分步骤，直接对内容执行atob解码即可

场景适配建议 #

• base64编码会让文件体积增大约33%，如果要上传大文件，可优先使用Ariadne原生支持的Upload标量实现上传，性能更好
• 后端Python侧接收base64字符串后，拆分去掉前缀后直接用base64.b64decode即可还原文件，和现有Python逻辑完全兼容

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