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

debugcn 发表于 Dev

森嫩兰迪卡

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

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

使用 GCS (Google Cloud Storage) 存储图像/文件并使用 Firebase Realtime 数据库存储 URL 对我来说也可以。

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

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

你能解释一下并告诉我如何在 React Native 中做到这一点吗？

周

我想在我的副项目中分享一些代码，它实现了你上面提到的功能。但是，很抱歉无法完全访问该项目的源代码。

步骤 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(`image.JPG`, `absolute/path/to/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);

希望它会有所帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。