React Native中react-native-crop-image-picker返回的图片路径如何转base64

分为零依赖内置API实现和第三方轻量库实现两种可选方案，按需选择即可：

方案一：使用React Native内置API实现（零额外依赖） #

直接用RN自带的fetch和FileReader实现转换，无需引入第三方依赖，代码示例如下：

// 你的本地图片路径
const localImagePath = 'file:///Users/.../image-name.png';

const pathToBase64 = async (filePath) => {
  try {
    const res = await fetch(filePath);
    const fileBlob = await res.blob();
    
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onloadend = () => {
        // 读取结果默认带`data:image/[格式];base64,`前缀，不需要可以自行切割
        resolve(reader.result);
      };
      reader.onerror = reject;
      reader.readAsDataURL(fileBlob);
    })
  } catch (e) {
    console.error('图片转base64失败:', e);
    throw e;
  }
}

// 调用时机：需要发送到socket前再执行转换
const base64Content = await pathToBase64(localImagePath);
// 执行socket发送逻辑
socket.send(base64Content);
// 发送完成后解除引用释放内存
base64Content = null;

方案二：使用react-native-fs实现（兼容性更好、内存占用更低） #

如果内置API在部分机型出现兼容性问题，可以使用轻量文件操作库react-native-fs实现，该库针对移动端文件读取做了内存优化，大文件场景下不容易出现OOM问题：

1. 安装依赖：

# npm安装
npm install react-native-fs --save
# iOS端执行pod安装
cd ios && pod install && cd ..

2. 转换代码：

import RNFS from 'react-native-fs';

const pathToBase64 = async (filePath) => {
  try {
    // 去除路径前缀file://，适配RNFS的路径要求
    const purePath = filePath.replace('file://', '');
    // 直接读取文件为base64格式
    const base64Str = await RNFS.readFile(purePath, 'base64');
    // 如有需要可自行拼接base64媒体前缀
    // const fullBase64 = `data:image/png;base64,${base64Str}`
    return base64Str;
  } catch (e) {
    console.error('图片读取转码失败:', e);
    throw e;
  }
}

注意事项 #

• Android平台需要提前申请文件读取权限：Android 13及以上版本申请READ_MEDIA_IMAGES权限，Android 12及以下版本申请READ_EXTERNAL_STORAGE权限，否则会出现读取失败问题
• 若单张图片体积超过1M，建议先压缩图片再转码传输，避免socket传输负载过大导致断连或超时
• 转码发送完成后及时解除base64变量的引用，方便JS引擎垃圾回收，避免内存堆积

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