javascript - 如何使用 Firebase 实时数据库和 React Native 上传图像/文件？

Question

我正在开发一个 React Native 项目，我正在为此使用 Firebase 实时数据库。

我想维护一个用户个人资料页面。为此，我需要将用户个人资料图片上传到 Firebase 数据库。当我查看用户个人资料时，我应该能够看到带有相关用户个人资料图像的用户个人资料。我也应该能够更新和删除用户个人资料图片。

使用 GCS(谷歌云存储)存储图像/文件和使用 Firebase 实时数据库存储 URL 对我来说也可以。

我只需要最好的解决方案。

我经历了一些类似的问题，但仍然对这样做的明确方法感到困惑。

能否请您解释并告诉我如何在 React Native 中执行此操作？

Answer 1

我想分享我的副项目中的一些代码，这些代码实现了您上面提到的功能。但是，很抱歉，项目源代码的完整访问权限不可用。

第 1 步。在用户提交图片时上传图片文件。

import firebase from 'react-native-firebase';

const upload = async (filepath: string, filename: string, filemime: string) => {
    const metaData = { contentType: filemime };
    const res = await firebase
        .storage()
        .ref(`gcs-folder-name-here/${filename}`)
        .putFile(filepath, metaData); // put image file to GCS
    return res;
};

第 2 步。调用 upload 函数后，您应该能够从响应中检索图像 URL 并将其保存回 Firebase 实时数据库。

import firebase from 'react-native-firebase';

const userId = firebase.auth().currentUser.uid;
const res = await upload(`absolute/path/to/image.JPG`, `image.JPG`, `image/jpeg`); // function in step 1
const data = {
    name: 'User Name'
    photo: res.downloadURL, // retrieve image URL
};
firebase.database().ref('users/' + userId).set(data);

希望对您有所帮助。