如何将react-native-image-picker选取的图片上传至Firebase Storage并获取访问URL

实现步骤 #

• 首先确保你已经在React Native项目中正确配置了Firebase，且安装了Storage依赖：

# npm安装依赖
npm install @react-native-firebase/app @react-native-firebase/storage
# 若使用yarn
yarn add @react-native-firebase/app @react-native-firebase/storage

安装完成后按Firebase指引完成安卓、iOS端的原生配置即可。

• 接下来在原有Upload组件中添加上传逻辑，完整可运行代码如下：

import React, {useState} from 'react';
import {View, TouchableOpacity, Text, StyleSheet, Image, Alert} from 'react-native';
import ImagePicker from 'react-native-image-picker';
// 引入Firebase Storage
import storage from '@react-native-firebase/storage';

export default function Upload() {
  const [avatar, setAvatar] = useState();
  // 添加上传状态，避免重复点击提交
  const [uploading, setUploading] = useState(false);

  function imagePickerCallback(data) {
    if (data.didCancel) {
      return;
    }
    if (data.error) {
      Alert.alert('选图失败', data.error);
      return;
    }
    if (data.customButton) {
      return;
    }
    if (!data.assets[0].uri) {
      return;
    }
    setAvatar(data.assets[0]);
  }

  // 新增上传到Firebase Storage、获取访问链接的方法
  const uploadAvatar = async () => {
    if (!avatar?.uri) {
      Alert.alert('提示', '请先选择或拍摄图片');
      return;
    }
    setUploading(true);
    try {
      // 生成唯一文件名避免覆盖，可根据业务调整，比如拼接用户唯一ID
      const fileExt = avatar.type.split('/')[1]
      const fileName = `avatar_${Date.now()}.${fileExt}`;
      // 指定存储在Firebase Storage中的路径
      const storageRef = storage().ref(`user_avatars/${fileName}`);
      
      // 执行上传
      await storageRef.putFile(avatar.uri);
      
      // 上传完成后获取公开访问URL
      const downloadUrl = await storageRef.getDownloadURL();
      Alert.alert('上传成功', `图片访问地址已生成`);
      // 此处可将downloadUrl写入你的业务数据库、做后续逻辑处理
      console.log('图片访问URL：', downloadUrl);
    } catch (error) {
      Alert.alert('上传失败', error.message);
      console.error('上传错误：', error);
    } finally {
      setUploading(false);
    }
  };

  return (
    <View style={styles.container}>
      <Image
        source={{
          uri: avatar
            ? avatar.uri
            : 'https://mltmpgeox6sf.i.optimole.com/w:761/h:720/q:auto/https://redbanksmilesnj.com/wp-content/uploads/2015/11/man-avatar-placeholder.png',
        }}
        style={styles.avatar}
      />
      <TouchableOpacity
        style={styles.button}
        onPress={() =>
          ImagePicker.launchCamera(imagePickerCallback)
        }>
        <Text style={styles.buttonText}>拍照</Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={styles.button}
        onPress={() =>
          ImagePicker.launchImageLibrary(imagePickerCallback)
        }>
        <Text style={styles.buttonText}>从相册选择</Text>
      </TouchableOpacity>

      {/* 新增上传按钮 */}
      <TouchableOpacity
        style={[styles.button, {backgroundColor: uploading ? '#ccc' : '#2196F3'}]}
        onPress={uploadAvatar}
        disabled={uploading}
      >
        <Text style={styles.buttonText}>{uploading ? '上传中...' : '上传到云存储'}</Text>
      </TouchableOpacity>

    </View>
  );
}

// 样式可根据需求自行调整
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20
  },
  avatar: {
    width: 150,
    height: 150,
    borderRadius: 75,
    marginBottom: 30
  },
  button: {
    backgroundColor: '#4CAF50',
    padding: 12,
    borderRadius: 8,
    marginVertical: 8,
    width: '80%',
    alignItems: 'center'
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '500'
  }
})

注意事项 #

• 提前在Firebase控制台开启Storage服务，测试阶段可临时放开读写权限验证功能，上线前务必调整为符合业务要求的安全规则。
• 如果需要上传大文件，可以监听putFile返回的任务快照，实现上传进度展示的功能。

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