React Native 将接口返回的BASE64图片写入FileSystem失败问题求助

排查与解决步骤 #

1. 修复PHP端多余输出问题

你的PHP代码存在潜在的多余输出风险，base64字符串首尾如果混入空格、换行等不可见字符，会导致文件写入解码失败，但Image组件容错性较高可正常渲染：

• 删除PHP文件末尾的?>闭合标签，PHP解析器在文件末尾不需要闭合标签，可避免标签后多余的空格、换行被输出
• 在echo($base64);后添加exit;语句，终止后续所有输出
• 检查引入的database_connections.php文件，确保文件开头、结尾没有多余的空白字符，也没有额外的echo/var_dump等调试输出

修复后的PHP代码示例：

<?php
require_once 'database_connections.php'; 
$data = json_decode(file_get_contents("php://input"));

$id = mysqli_real_escape_string($con, $data->id);
$page = mysqli_real_escape_string($con, $data->page);

$path = "../../images/" . $id . '/' . $page . '.jpg';

$imagedata = file_get_contents($path);
$base64 = base64_encode($imagedata);   

echo($base64);
exit;

2. 修正Axios请求配置

Axios默认会尝试自动解析响应内容，可能对纯base64文本产生非预期转义，添加responseType指定响应格式为纯文本：

export const getImage = async () => {
  try {
    const response = await axios.post(
      url,
      {
        id: '11bb2c1b-c262-4171-b614-d8af46898efb',
        page: '001',
      },
      { responseType: 'text' }
    );
    // 去除首尾空白字符
    return response.data.trim();
  } catch (error) {
    console.error(error.message);
    throw error; // 抛出错误让上层调用捕获
  }
};

3. 添加上下文错误捕获与校验

你当前的代码缺少写入环节的错误捕获，也没有校验数据有效性，添加日志和校验快速定位问题：

try {
  const image = await getImage();
  // 校验base64数据是否存在
  if (!image || typeof image !== 'string' || image.length < 100) {
    throw new Error('图片base64数据无效');
  }
  const filename = FileSystem.documentDirectory + 'imagetest.jpg';
  await FileSystem.writeAsStringAsync(filename, image, {
    encoding: FileSystem.EncodingType.Base64,
  });
  // 写入后校验文件是否生成
  const fileStat = await FileSystem.getInfoAsync(filename);
  console.log('文件写入成功，文件信息：', fileStat);
} catch (writeErr) {
  console.error('文件写入失败，错误信息：', writeErr);
}

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