Блог

У меня есть приложение CRUD React, в котором вы можете создавать статьи. Есть «заголовок», «содержимое» и «изображение».

В облачном хранилище Firestore у меня есть коллекция под названием «статьи». В документах есть поля: ‘title’ и ‘content’, поэтому каждый раз, когда я создаю статью в своем приложении react, создается новый документ.

Следующим шагом была возможность добавлять изображения к статьям.

Мне удалось подключиться к Firebase и загрузить изображение в хранилище Firebase со своей страницы React. Однако как мне подключить изображения к их статьям? Например, как мне установить соединение между облачным хранилищем Firestore и хранилищем?

Должен ли я создавать дополнительное поле в своих документах под названием «изображения»? Но тогда как мне ссылаться на это? Я также хочу попытаться избежать дубликатов.

UploadImage.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;
  

Это моя форма «Добавить статью» —>

AddArticle.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;
  

На самом деле это довольно просто, для достижения этого выполните следующие действия:

1. После загрузки вашего изображения в хранилище firebase вы должны получить URL-адрес для загрузки этого конкретного изображения (ниже я привел ссылку на документацию firebase о том, как этого добиться).

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

2. Если вы успешно извлекли URL-адрес загрузки из хранилища firebase, теперь пришло время создать отдельное поле под вашим документом с таким именем, как «postImageUrl» (вы можете назвать как угодно) и сохранить URL-адрес загрузки в этом поле.

3. Теперь вы можете показывать изображения, используя этот URL для загрузки, на своей странице, используя библиотеку busboy

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

Примечание: Я разработчик Android, поэтому я старался изо всех сил помочь. Если у вас есть дополнительные вопросы, не стесняйтесь задавать