React-Native上传Base64图片至Firebase后文件过大的问题求助

这个问题的根源其实很直观：Base64编码本身会让文件体积增加约33%。因为Base64是把每3个字节的二进制数据转换成4个ASCII字符，编码后的内容必然比原始二进制文件大。你现在直接用putString上传Base64字符串，Firebase会把这个字符串当成原始数据存储，自然体积就变大了。

要解决这个问题，我们需要把Base64字符串还原成原始的二进制文件（Blob），再上传到Firebase Storage，这样就能保证上传后的文件大小和原文件一致。

下面是具体的实现步骤和代码修改：

步骤1：移除Base64前缀并转换为Blob #

首先，你的imageUrl应该是类似data:image/jpeg;base64,xxxxxx这样的格式，我们需要先去掉前面的data:image/jpeg;base64,前缀，然后把剩下的Base64字符串转换成Blob对象。

// 处理Base64字符串，移除前缀
const base64String = imageUrl.replace(/^data:image\/jpeg;base64,/, '');

// 将Base64转换为Blob
const convertBase64ToBlob = (base64) => {
  const byteCharacters = atob(base64);
  const byteArrays = [];
  
  for (let offset = 0; offset < byteCharacters.length; offset += 512) {
    const slice = byteCharacters.slice(offset, offset + 512);
    const byteNumbers = new Array(slice.length);
    
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }
  
  return new Blob(byteArrays, { type: 'image/jpeg' });
};

const imageBlob = convertBase64ToBlob(base64String);

步骤2：使用Blob上传到Firebase Storage #

接下来，把原来的putString换成put方法，传入Blob对象即可：

var storageRef = firebase.storage().ref('images'); 
let uuid = uuidv1(); 
var uploadTask = storageRef.child(`${uuid}`).put(imageBlob, { contentType: 'image/jpeg' });

这样上传的就是原始的二进制图片数据，体积会和你本地的23.4KB完全一致。

额外注意事项 #

• 如果你的React Native环境中atob或者Blob构造函数有兼容性问题，可以考虑使用第三方库辅助转换，但上面的原生方法在大多数现代React Native版本中都能正常工作。
• 确保contentType和原图片的格式严格匹配（比如原图片是jpg就用image/jpeg，png就用image/png），避免Firebase自动推断格式导致的额外开销。

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