React Native跨平台应用：Blob转Base64方法求助（无法用FileReader）

方法1：使用react-native-fs库 #

这是React Native生态中处理文件系统的常用工具，能便捷实现Blob到Base64的转换：

1. 安装依赖：

npm install react-native-fs --save
# 或使用yarn
yarn add react-native-fs

2. 核心实现代码：

import RNFS from 'react-native-fs';

async function blobToBase64(blob) {
  // 创建临时文件路径
  const tempPath = RNFS.TemporaryDirectoryPath + '/temp-convert-file';
  const writeStream = RNFS.createWriteStream(tempPath);
  
  return new Promise((resolve, reject) => {
    writeStream.on('error', reject);
    writeStream.on('finish', async () => {
      // 读取临时文件为Base64格式
      const base64Str = await RNFS.readFile(tempPath, 'base64');
      // 清理临时文件
      await RNFS.unlink(tempPath);
      resolve(base64Str);
    });
    
    // 将Blob转成Buffer写入流
    blob.arrayBuffer().then(buffer => {
      writeStream.write(Buffer.from(buffer));
      writeStream.end();
    }).catch(reject);
  });
}

方法2：使用rn-fetch-blob（Blob处理优化方案） #

该库专为React Native优化了网络与文件操作，对Blob转Base64的支持更直接：

1. 安装依赖：

npm install rn-fetch-blob --save

2. 核心实现代码：

import RNFetchBlob from 'rn-fetch-blob';

async function blobToBase64(blob) {
  // 将原生Blob转为库兼容格式
  const rnBlob = RNFetchBlob.wrap(blob);
  // 直接读取为Base64
  const base64Str = await RNFetchBlob.fs.readFile(rnBlob, 'base64');
  return base64Str;
}

如果是直接从S3获取文件的场景，还可以跳过原生fetch，直接用该库请求并转Base64：

async function fetchS3ToBase64(s3Url) {
  const response = await RNFetchBlob.fetch('GET', s3Url, {
    // 按需添加S3请求头，比如Authorization等
  });
  return response.base64();
}

方法3：原生ArrayBuffer手动转换（无依赖方案） #

若不想引入第三方库，可通过Blob的arrayBuffer()方法获取数据后手动编码：

async function blobToBase64(blob) {
  const buffer = await blob.arrayBuffer();
  const uint8Array = new Uint8Array(buffer);
  let base64Str = '';
  const lookupTable = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
  
  // 每3个字节一组处理
  for (let i = 0; i < uint8Array.length; i += 3) {
    const byte1 = uint8Array[i];
    const byte2 = uint8Array[i + 1] || 0;
    const byte3 = uint8Array[i + 2] || 0;
    
    const triplet = (byte1 << 16) | (byte2 << 8) | byte3;
    
    base64Str += lookupTable[(triplet >> 18) & 0x3F];
    base64Str += lookupTable[(triplet >> 12) & 0x3F];
    base64Str += lookupTable[(triplet >> 6) & 0x3F];
    base64Str += lookupTable[triplet & 0x3F];
  }
  
  // 处理Base64填充字符
  const paddingLen = uint8Array.length % 3;
  if (paddingLen === 1) {
    base64Str = base64Str.slice(0, -2) + '==';
  } else if (paddingLen === 2) {
    base64Str = base64Str.slice(0, -1) + '=';
  }
  
  return base64Str;
}

注意：该方法处理大文件时内存占用较高，建议仅用于小文件场景，或配合分片逻辑使用。

额外提示 #

• 处理大文件时优先选择rn-fetch-blob或react-native-fs，它们对内存管理优化更好，能避免应用卡顿。
• 如果是展示图片类文件，React Native的Image组件直接支持blob:开头的URI，无需转Base64，可大幅节省内存、提升性能。

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