如何将 Firebase Storage 与 Cloud Firestore 连接，以便我的图像与其各自的帖子相关联？

Question

我有一个 CRUD React 应用程序，您可以在其中创建文章。有“标题”、“内容”和“图像”。

我在 Cloud Firestore 中有一个名为“文章”的集合。这些文档具有字段：“标题”和“内容”，因此每次我在 React 应用程序中创建文章时，都会创建一个新文档。

下一步是能够向文章添加图像。

我成功连接到 Firebase 并将图像从我的 React 页面上传到 Firebase Storage。但是如何将图像与他们的文章联系起来？例如，如何在 Cloud Firestore 和 Storage 之间建立连接？

我是否在文档中创建一个名为“图像”的额外字段？但那我该如何引用它呢？我也想尝试避免重复。

上传图片.js

import React, { useState, Component } from "react";
import { storage } from "../Firebase";

function UploadFile() {
        const [image, setImage] = useState(null);
        const [url, setUrl] = useState("");
        const [progress, setProgress] = useState(0);

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

          const handleUpload = () => {
            const uploadTask = storage.ref(`images/${image.name}`).put(image);
            uploadTask.on(
              "state_changed",
              snapshot => {
                const progress = Math.round(
                  (snapshot.bytesTransferred / snapshot.totalBytes) * 100
                );
                setProgress(progress);
              },
              error => {
                console.log(error);
              },
              () => {
                storage
                  .ref("images")
                  .child(image.name)
                  .getDownloadURL()
                  .then(url => {
                    setUrl(url);
                  });
              }
            );
          };

          console.log("image: ", image);

      return (
        <div>
      <progress value={progress} max="100" />
      <br />
      <br />
      <input type="file" onChange={handleChange} />
      <button onClick={handleUpload}>Upload</button>
      <br />
      {url}
      <br />
      <img src={url || "http://via.placeholder.com/300"} alt="firebase-image" />
    </div>
         
      );
    }

    export default UploadFile;

这是我的“添加文章”表单-->

添加文章.js

import React, { Component } from 'react';
import firebase from '../Firebase';
import UploadFile from '../components/UploadFile';

class AddArticle extends Component {

  constructor() {
    super();
    this.ref = firebase.firestore().collection('articles');
    this.state = {
      title: '',
      content: ''
    };
  }
  onChange = (e) => {
    const state = this.state
    state[e.target.name] = e.target.value;
    this.setState(state);
  }

  onSubmit = (e) => {
    e.preventDefault();

    const { title, content } = this.state;

    this.ref.add({
      title,
      content

    }).then((docRef) => {
      this.setState({
        title: '',
        content: ''
      });
      this.props.history.push("/")
    })
    .catch((error) => {
      console.error("Error adding document: ", error);
    });
  }

  render() {
    const { title, content } = this.state;
    return (
      <div className="container">
      <br></br><br></br><br></br>
        <div className="panel panel-default">
          <div className="panel-heading">
            <h3 className="panel-title text-center">
              Create a new article
            </h3>
          </div>
          <br></br><br></br>
          <div className="panel-body">
            <form onSubmit={this.onSubmit}>
              <div className="form-group">
                <label for="title">Title:</label>
                <input type="text" className="form-control" name="title" value={title} onChange={this.onChange} placeholder="Title" />
              </div>
              <div className="form-group">
                <label for="content">Content:</label>
                <textArea className="form-control" name="content" onChange={this.onChange} placeholder="Content" cols="80" rows="20">{content}</textArea>
              </div>
              <UploadFile />
              <button type="submit" className="btn btn-success">Submit</button>
            </form>
          </div>
        </div>
      </div>
    );
  }
}

export default AddArticle;

Answer 1

其实很简单，要实现这一点，请按照以下步骤操作：

1. 将图像上传到 Firebase 存储后，您应该获得该特定图像的下载网址（我在下面链接了 Firebase 文档链接，了解如何实现这一目标）。

https://firebase.google.com/docs/storage/web/download-files

2. 如果您成功从 Firebase 存储中获取了下载 url，现在是时候在文档下创建名为“postImageUrl”的单独字段（您可以命名任何您想要的名称），并在此字段下保存下载 url。

3. 现在，您可以使用 Busboy 库在页面中使用此下载网址显示图像

https://www.npmjs.com/package/busboy

注意：我是一名 Android 开发人员，所以我尽力提供帮助。如果您还有其他问题，请随时询问