JavaScript中Blob转Base64问题：已实现Base64转Blob但无法逆向转换

嘿，我懂你这种卡壳的感觉——能顺利把Base64转成Blob，逆向操作却搞不定，确实让人头疼。别慌，我来给你分享一个靠谱的Blob转Base64实现，帮你解决这个问题。

首先，浏览器提供了FileReader API，专门用来读取Blob或File对象的内容，我们可以用它来完成逆向转换。这里有一个封装好的异步函数：

function blobToBase64(blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    // 读取完成时触发，返回DATA_URI格式的Base64字符串
    reader.onloadend = () => resolve(reader.result);
    // 处理读取错误
    reader.onerror = reject;
    // 以DATA_URI形式读取Blob内容
    reader.readAsDataURL(blob);
  });
}

怎么用这个函数？ #

因为FileReader是异步操作，所以函数返回了Promise，你可以用async/await或者.then()来获取结果：

// 示例：假设你已经有了一个blob对象
async function handleBlobConversion() {
  const yourBlob = ...; // 这里替换成你的Blob实例
  try {
    const base64Data = await blobToBase64(yourBlob);
    console.log('转换后的Base64:', base64Data);
    // 如果只需要纯Base64部分（去掉data:image/png;base64,前缀）
    const pureBase64 = base64Data.split(',')[1];
    console.log('纯Base64字符串:', pureBase64);
  } catch (error) {
    console.error('转换失败:', error);
  }
}

补充说明 #

你的Base64转Blob的代码思路是完全正确的——用atob解码Base64字符串，切割成字节数组再生成Blob，这部分不需要调整。问题出在逆向转换时没用到正确的API，FileReader.readAsDataURL就是专门干这个事的，它会直接输出你需要的DATA_URI格式字符串。

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