如何将Expo图片选择器获取的图片转为UTF-8编码的Base64字符串？

问题背景 #

我通过Expo Image Picker获取图片URI，代码如下：

return ImagePicker.launchImageLibraryAsync({
    allowsEditing: false,
    base64: true,
    quality: 1,
})

尝试用RNFS库将图片转为Base64字符串：

const imageBase64 = await RNFS.readFile(image, 'base64').then(res => {
   return res
});

但生成的Base64字符串与在线工具的编码结果不匹配，怀疑需要用UTF-8编码图片，求实现方法。

解决方案 #

1. 直接使用Expo Image Picker自带的Base64返回值 #

你不需要额外依赖RNFS——因为调用launchImageLibraryAsync时已经设置了base64: true，接口返回的结果中已经包含现成的Base64编码，直接取用即可：

const pickResult = await ImagePicker.launchImageLibraryAsync({
    allowsEditing: false,
    base64: true,
    quality: 1,
});

if (!pickResult.canceled) {
    const validBase64 = pickResult.assets[0].base64;
    // 此值与在线工具生成的Base64一致
}

2. 若必须使用RNFS处理 #

如果一定要用RNFS生成Base64，注意以下两点：

• 确保传入的image是RNFS可识别的本地文件路径：Expo返回的URI（比如Android的content://格式）需要先转换为RNFS能读取的路径，可借助Expo FileSystem完成路径转换与文件复制：

  import * as FileSystem from 'expo-file-system';
  
  // 转换Expo URI为RNFS可用路径
  const fileName = image.split('/').pop();
  const targetPath = FileSystem.documentDirectory + fileName;
  await FileSystem.copyAsync({ from: image, to: targetPath });
  
  // 读取文件生成Base64
  const imageBase64 = await RNFS.readFile(targetPath, 'base64');
  

• 不要对图片做UTF-8编码：图片是二进制数据，Base64是直接对二进制流编码的格式，UTF-8是文本编码规范，强行将二进制图片转为UTF-8会破坏原始数据，这也是你之前结果不一致的核心原因。

结果不一致的原因 #

在线工具是直接读取图片原始二进制数据生成Base64，而你之前用RNFS时可能存在路径错误，或者错误地对Base64字符串做了UTF-8转码操作，导致最终结果偏离正确值。使用Expo自带的Base64返回值可以完全避免这类问题。

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