上载到firestore(React)中保存getImageURL后的Firebase存储URL？_如何使用swr-firestore上传firebase存储中的图像并在react中获取上传的图像url_将文件上传到firebase存储并获取URL以保存在react中的数据库中 - 腾讯云开发者社区

上载到firestore(React)中保存getImageURL后的Firebase存储URL？

Firestore 是 Firebase 提供的一个 NoSQL 数据库服务，而 Firebase 存储则是一个用于存储和检索文件的云服务。在 React 应用中，你可以将图片上传到 Firebase 存储，并获取图片的 URL，然后将该 URL 保存到 Firestore 中。

基础概念

Firebase 存储：用于存储文件（如图片、视频等）的云服务。
Firestore：Firebase 的 NoSQL 数据库，用于存储结构化数据。

优势

集成性：Firebase 提供了一整套工具和服务，易于集成和管理。
可扩展性：Firestore 和 Firebase 存储都支持自动扩展，能够处理大量数据和高并发请求。
安全性：提供细粒度的安全规则，确保数据的安全性和隐私。

类型

Firestore 数据类型：支持文档（Documents）、集合（Collections）、字段（Fields）等。
Firebase 存储类型：支持文件（Files）、文件夹（Folders）、元数据（Metadata）等。

应用场景

Web 和移动应用：适用于需要存储和检索大量结构化和非结构化数据的 Web 和移动应用。
实时数据同步：Firestore 支持实时数据同步，适用于需要实时更新的应用。

上传图片并保存 URL 到 Firestore

以下是一个示例代码，展示如何在 React 应用中上传图片到 Firebase 存储，并将图片 URL 保存到 Firestore 中。

安装依赖

首先，确保你已经安装了 Firebase 和 React 相关的依赖：

npm install firebase react

初始化 Firebase

在你的 React 项目中初始化 Firebase：

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/storage';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

firebase.initializeApp(firebaseConfig);

const firestore = firebase.firestore();
const storage = firebase.storage();

上传图片并保存 URL 到 Firestore

import React, { useState } from 'react';

const UploadImage = () => {
  const [image, setImage] = useState(null);
  const [imageUrl, setImageUrl] = useState('');

  const handleImageChange = (e) => {
    setImage(e.target.files[0]);
  };

  const uploadImage = async () => {
    if (!image) return;

    const storageRef = storage.ref().child(image.name);
    const uploadTask = storageRef.put(image);

    uploadTask.on('state_changed', 
      (snapshot) => {
        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        console.log('Upload is ' + progress + '% done');
      }, 
      (error) => {
        console.error(error);
      }, 
      () => {
        uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
          setImageUrl(downloadURL);
          saveImageUrlToFirestore(downloadURL);
        });
      }
    );
  };

  const saveImageUrlToFirestore = async (url) => {
    try {
      await firestore.collection('images').add({
        url: url,
        timestamp: firebase.firestore.FieldValue.serverTimestamp()
      });
      console.log('Image URL saved to Firestore');
    } catch (error) {
      console.error('Error saving image URL to Firestore:', error);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleImageChange} />
      <button onClick={uploadImage}>Upload</button>
      {imageUrl && <img src={imageUrl} alt="Uploaded" />}
    </div>
  );
};

export default UploadImage;