如何将ImagePickerExample的图片URI传递到WritingPage并解决上传错误？

核心问题排查方向 #

你遇到的uri does not exist和Network request failed，大概率是组件间未正确传递图片URI，或者URI格式/权限有问题，再或者Firebase上传逻辑存在疏漏，下面分步骤解决：

1. 确保ImagePickerExample正确向父组件传递URI #

子组件需要通过回调函数把选中的图片URI传递给WritingPage，这是最容易忽略的关键环节：

修改ImagePickerExample.js

import React, { useState } from 'react';
import { Button, Image } from 'react-native';
import ImagePicker from 'react-native-image-picker'; // 或你使用的expo-image-picker

const ImagePickerExample = ({ onImageSelected }) => {
  const [selectedImage, setSelectedImage] = useState(null);

  const pickImage = async () => {
    // 以expo-image-picker为例，其他库请调整对应API
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      quality: 1,
    });

    if (!result.canceled) {
      const uri = result.assets[0].uri;
      setSelectedImage(uri);
      // 调用父组件传过来的回调，传递URI
      onImageSelected?.(uri);
    }
  };

  return (
    <>
      <Button title="选择图片" onPress={pickImage} />
      {selectedImage && <Image source={{ uri: selectedImage }} style={{ width: 200, height: 200 }} />}
    </>
  );
};

export default ImagePickerExample;

在WritingPage.js中接收并处理URI

import React, { useState } from 'react';
import { Button, View } from 'react-native';
import ImagePickerExample from './ImagePickerExample';
import { getStorage, ref, uploadBytes } from "firebase/storage";

const WritingPage = () => {
  const [imageUri, setImageUri] = useState(null);
  const storage = getStorage();

  // 接收子组件传递的URI
  const handleImageSelected = (uri) => {
    setImageUri(uri);
    console.log('选中的图片URI:', uri); // 先打印确认是否拿到有效URI
  };

  const uploadToFirebase = async () => {
    if (!imageUri) {
      console.error('uri does not exist');
      return;
    }

    try {
      // 创建存储引用
      const storageRef = ref(storage, `images/${Date.now()}.jpg`);
      // 把URI转成Blob（Firebase上传必须的步骤）
      const response = await fetch(imageUri);
      const blob = await response.blob();
      // 执行上传
      await uploadBytes(storageRef, blob);
      console.log('上传成功');
    } catch (error) {
      console.error('上传失败:', error);
    }
  };

  return (
    <View>
      <ImagePickerExample onImageSelected={handleImageSelected} />
      <Button title="上传到Firebase" onPress={uploadToFirebase} disabled={!imageUri} />
    </View>
  );
};

export default WritingPage;

2. 解决URI相关问题 #

• 检查URI格式：React Native中图片URI通常以file://开头，若拿到的是绝对路径，手动拼接file://前缀（部分Android设备会直接返回无前缀路径）。
• 权限配置：
  • iOS：在Info.plist中添加相册访问权限：

    <key>NSPhotoLibraryUsageDescription</key>
    <string>需要访问你的相册选择图片</string>
    

  • Android：在AndroidManifest.xml中添加必要权限：

    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.INTERNET" /> <!-- 网络权限必须添加 -->
    

3. 解决Network request failed问题 #

• Firebase配置校验：确认你的Firebase配置文件中存储Bucket地址正确，无拼写错误。
• 网络环境检查：真机测试确保设备联网，模拟器需开启网络连接。
• Blob转换不可省略：Firebase的uploadBytes仅接收Blob或Uint8Array类型，直接传URI会触发请求失败，必须通过fetch转成Blob（上述代码已包含此步骤）。

额外排查点 #

• 若使用Expo，确保已安装并配置expo-image-picker和expo-firebase-storage，且在app.json中声明了对应权限。
• 测试时优先打印imageUri，确认其不为undefined或空字符串，再执行上传逻辑，避免触发uri does not exist错误。

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