Expo中用Fetch上传缩略图至Firebase时出现网络请求失败

你遇到的「Network request failed」错误，核心原因是expo-video-thumbnails生成的缩略图是本地文件URI（如file://开头），而fetch函数无法在Android模拟器上直接处理本地文件请求——fetch是为HTTP/HTTPS网络请求设计的，对本地文件的支持存在兼容性问题。

以下是针对性的修复方案：

1. 改用Expo FileSystem处理本地文件 #

Expo的FileSystem API专门用于本地文件操作，能可靠读取缩略图这类本地URI并转换为可上传的格式。

修改后的代码： #

首先确保安装并导入expo-file-system：

npx expo install expo-file-system

import * as FileSystem from 'expo-file-system';
import firebase from 'firebase/app';
import 'firebase/storage';

export const saveMediaToStorage = async (media, path) => {
  const fileRef = firebase.storage().ref().child(path);

  // 区分本地文件（缩略图）和网络/远程视频URI
  if (media.startsWith('file://') || media.startsWith('content://')) {
    // 读取本地缩略图为base64格式
    const base64Data = await FileSystem.readAsStringAsync(media, {
      encoding: FileSystem.EncodingType.Base64,
    });
    // 上传base64数据到Firebase Storage
    const uploadTask = await fileRef.putString(base64Data, 'base64', {
      contentType: 'image/jpeg', // 缩略图默认是JPEG格式
    });
    return uploadTask.ref.getDownloadURL();
  } else {
    // 视频仍用原fetch逻辑处理
    const response = await fetch(media);
    const blob = await response.blob();
    const uploadTask = await fileRef.put(blob);
    return uploadTask.ref.getDownloadURL();
  }
};

2. 额外排查点 #

• 验证缩略图URI有效性：调用expo-video-thumbnails.getThumbnailAsync后，console.log(media)确认URI是否正常生成（比如file:///data/user/0/host.exp.exponent/cache/ExponentThumbnail/xxx.jpg）。
• Firebase Storage规则：虽然视频能正常上传，但仍确认规则是否允许写入缩略图的目标路径（比如是否开放了write权限给认证用户或临时测试用的allow write: if true;）。
• 模拟器网络权限：确保Android模拟器已联网，且没有防火墙/代理拦截Firebase请求（可切换到真机测试排除模拟器网络问题）。

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