React Native如何将本地图片路径转为base64及base64转回图片方法

本地图片路径转Base64 #

方案1：利用react-native-image-crop-picker自带配置（优先推荐，无需额外依赖） #

你使用的图片选择库本身支持直接返回Base64编码，仅需在调用时新增includeBase64: true配置即可：

import ImageCropPicker from 'react-native-image-crop-picker';

ImageCropPicker.openPicker({
  mediaType: 'photo',
  includeBase64: true, // 开启返回base64配置
}).then(image => {
  // image.data 即为图片的纯Base64编码内容
  // 如需用于渲染、接口上传等场景，可补充资源前缀
  const fullBase64 = `data:image/jpeg;base64,${image.data}`;
})

方案2：通过本地文件读取实现（适用于已拿到file路径的场景） #

如果已经获取到file://开头的本地路径，可以通过react-native-fs库读取文件转Base64：

import RNFS from 'react-native-fs';

// 先去除路径的file://前缀，适配Android文件读取规则
const targetPath = 'file:///storage/emulated/0/Android/data/com.connect/files/Pictures/da154e60-77e0-4364-96a7-ad7fa5acb951.jpg'.replace('file://', '');

RNFS.readFile(targetPath, 'base64')
  .then(base64Content => {
    const fullBase64 = `data:image/jpeg;base64,${base64Content}`;
    // 按需使用base64即可
  })
  .catch(err => console.log('转码失败：', err))

Base64转回图片格式 #

场景1：直接在React Native页面渲染 #

无需额外转换，直接将带前缀的完整Base64字符串传给Image组件的uri参数即可：

import { Image } from 'react-native';

// 直接渲染base64图片
<Image
  source={{ uri: `data:image/jpeg;base64,${纯base64编码内容}` }}
  style={{ width: 300, height: 300 }}
/>

场景2：将Base64存为本地图片文件 #

还是通过react-native-fs将Base64内容写入本地生成图片文件：

import RNFS from 'react-native-fs';

// 先去除base64的资源前缀，只保留纯编码内容
const pureBase64 = 完整base64字符串.replace(/^data:image\/\w+;base64,/, '');
// 定义本地存储路径
const saveFilePath = `${RNFS.DocumentDirectoryPath}/custom_image_${Date.now()}.jpg`;

RNFS.writeFile(saveFilePath, pureBase64, 'base64')
  .then(() => {
    console.log('图片保存成功，本地路径为：', saveFilePath);
  })
  .catch(err => console.log('保存失败：', err))

注意事项 #

• 注意区分纯Base64编码内容和带资源前缀的完整Base64字符串两种格式：上传、存本地文件时使用纯编码，渲染显示两种格式都支持
• Android 10及以上版本操作外部存储文件需要先申请读写权限，执行文件读写操作前请确认权限已正常获取
• react-native-image-crop-picker返回的base64默认是纯编码格式，使用时根据场景判断是否需要补充前缀

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