React Native Android项目中如何选择图片并上传至Firebase Storage

以下是分步实现方案：

1. 安装依赖 #

先安装图片选择和Firebase相关的库：

# 图片选择库
npm install react-native-image-picker
# Firebase核心及Storage库
npm install @react-native-firebase/app @react-native-firebase/storage

如果用Yarn就把npm install换成yarn add。

2. 配置Android权限 #

打开android/app/src/main/AndroidManifest.xml，添加必要的权限声明：

<!-- 读取相册（兼容旧版本） -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<!-- 相机权限（如果需要拍照选图） -->
<uses-permission android:name="android.permission.CAMERA" />
<!-- Android 13+ 专属相册权限 -->
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />

3. Firebase基础配置 #

确保你已经完成Firebase的基础配置：

• 从Firebase控制台下载google-services.json，放到android/app/目录下
• 在android/build.gradle中添加Google服务插件依赖，android/app/build.gradle中应用插件（这是Firebase初始化的标准流程，若未完成可参考Firebase官方的React Native集成步骤）

4. 实现图片选择功能 #

编写触发图片选择的函数，调用react-native-image-picker的相册选择API：

import { launchImageLibrary } from 'react-native-image-picker';

const pickImage = async () => {
  const options = {
    mediaType: 'photo', // 仅选择图片
    quality: 0.8, // 图片压缩质量（0-1）
    maxWidth: 1024,
    maxHeight: 1024,
  };

  const result = await launchImageLibrary(options);

  if (result.didCancel) {
    console.log('用户取消选择');
    return;
  }
  if (result.errorCode) {
    console.error('选择错误:', result.errorMessage);
    return;
  }

  // 获取选中图片的本地Uri
  const selectedImageUri = result.assets[0].uri;
  // 调用上传函数
  await uploadToFirebase(selectedImageUri);
};

如果需要支持拍照选图，把launchImageLibrary换成launchCamera即可，配置参数相同。

5. 上传图片到Firebase Storage #

编写上传逻辑，包括进度监听和获取下载链接：

import storage from '@react-native-firebase/storage';

const uploadToFirebase = async (imageUri) => {
  try {
    // 生成唯一文件名，避免覆盖
    const fileName = `user-uploads/${Date.now()}-${Math.random().toString(36).slice(2)}.jpg`;
    // 创建Storage引用
    const storageRef = storage().ref(fileName);

    // 启动上传任务
    const uploadTask = storageRef.putFile(imageUri);

    // 可选：监听上传进度
    uploadTask.on('state_changed', (snapshot) => {
      const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      console.log(`上传进度：${Math.round(progress)}%`);
    });

    // 等待上传完成，获取图片下载链接
    await uploadTask;
    const downloadUrl = await storageRef.getDownloadURL();

    console.log('上传成功，下载链接：', downloadUrl);
    // 这里可以把downloadUrl存入Firestore或本地存储
    return downloadUrl;
  } catch (error) {
    console.error('上传失败:', error.message);
    throw error;
  }
};

关键注意事项 #

• Storage安全规则：开发阶段可以临时设置宽松规则方便测试，但生产环境必须限制权限：

  rules_version = '2';
  service firebase.storage {
    match /b/{bucket}/o {
      match /user-uploads/{allPaths=**} {
        allow read: if request.auth != null;
        allow write: if request.auth != null;
      }
    }
  }
  

• 动态权限申请：Android 13+需要动态申请相册权限，react-native-image-picker会自动处理，但若遇到权限问题，可手动用PermissionsAndroid申请：

  import { PermissionsAndroid } from 'react-native';
  
  const requestAlbumPermission = async () => {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.READ_MEDIA_IMAGES,
      {
        title: '需要访问相册',
        message: '应用需要访问你的相册来选择图片',
        buttonPositive: '允许',
      },
    );
    return granted === PermissionsAndroid.RESULTS.GRANTED;
  };
  

• 图片压缩：根据业务需求调整压缩参数，避免上传过大文件导致速度慢或占用过多Storage空间。

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