使用Expo FileSystem将Firebase图片URL转换为Base64时遭遇位置不可读取错误

我来帮你搞定这个问题！你遇到的Location isn't readable报错，核心原因是Expo FileSystem的readAsStringAsync方法并不支持直接读取远程HTTP/HTTPS URL——它只能处理本地文件路径（比如Expo的缓存目录、文档目录这类本地存储位置）。哪怕浏览器能正常打开这个URL，FileSystem也没法直接读取远程网络资源。

下面给你两种可行的解决方案，你可以根据需求选择：

方案1：先下载远程文件到本地缓存，再读取Base64 #

这种方式依赖Expo FileSystem的下载能力，先把远程图片存到本地临时目录，再读取转Base64，适合需要用FileSystem处理文件的场景：

import * as FileSystem from 'expo-file-system';
import { Share, TouchableOpacity } from 'react-native';

// 封装处理逻辑
const handleImageShare = async (imageUrl) => {
  try {
    // 1. 生成本地临时文件路径（用缓存目录，避免占用永久存储空间）
    const tempFilePath = `${FileSystem.cacheDirectory}temp_image.png`;
    
    // 2. 下载远程图片到本地
    await FileSystem.downloadAsync(imageUrl, tempFilePath);
    
    // 3. 读取本地文件并转换为Base64
    const base64String = await FileSystem.readAsStringAsync(tempFilePath, { 
      encoding: 'base64' 
    });
    
    // 4. 转换为Share API支持的Data URI格式
    const shareableUrl = `data:image/png;base64,${base64String}`;
    
    // 执行分享
    await Share.share(
      {
        title: 'test title',
        url: shareableUrl,
      },
      {
        excludedActivityTypes: [],
      }
    );
    
    // 可选：分享完成后删除临时文件，清理缓存
    await FileSystem.deleteAsync(tempFilePath);
  } catch (error) {
    console.error('分享处理失败:', error);
    alert('图片处理出错，请重试');
  }
};

// 在TouchableOpacity中使用
<TouchableOpacity onPress={() => handleImageShare('https://pngimg.com/uploads/birds/small/birds_PNG108.png')}>
  {/* 你的按钮内容，比如<Text>分享图片</Text> */}
</TouchableOpacity>

方案2：用Fetch API直接获取并转换Base64 #

如果不想依赖FileSystem的下载功能，可以用原生Fetch API获取Blob，再转换成Base64，更轻量化：

import { Share, TouchableOpacity } from 'react-native';

const handleImageShareWithFetch = async (imageUrl) => {
  try {
    // 1. 获取远程图片的Blob数据
    const response = await fetch(imageUrl);
    const blob = await response.blob();
    
    // 2. 将Blob转换为Base64
    const base64String = await new Promise((resolve, reject) => {
      const fileReader = new FileReader();
      fileReader.onloadend = () => {
        // 去掉Data URI前缀，只保留纯Base64字符串
        resolve(fileReader.result.split(',')[1]);
      };
      fileReader.onerror = reject;
      fileReader.readAsDataURL(blob);
    });
    
    // 3. 生成可分享的Data URI
    const shareableUrl = `data:image/png;base64,${base64String}`;
    
    // 执行分享
    await Share.share(
      {
        title: 'test title',
        url: shareableUrl,
      },
      {
        excludedActivityTypes: [],
      }
    );
  } catch (error) {
    console.error('分享处理失败:', error);
    alert('图片处理出错，请重试');
  }
};

// 在TouchableOpacity中使用
<TouchableOpacity onPress={() => handleImageShareWithFetch('https://pngimg.com/uploads/birds/small/birds_PNG108.png')}>
  {/* 你的按钮内容 */}
</TouchableOpacity>

注意事项 #

• 跨域问题：确保远程服务器允许跨域请求（CORS），否则fetch或downloadAsync会失败。如果是Firebase存储的URL，要检查存储规则是否允许公开访问，或者你的App是否有对应的权限凭证。
• 错误处理：一定要用try-catch包裹异步操作，避免出现你之前遇到的Unhandled promise rejection错误。
• 文件格式：如果处理的是其他格式图片（比如JPG），记得把Data URI里的image/png改成对应格式（比如image/jpeg）。

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