使用 Firebase 上传图片不上传图片

Question

我正在使用 React 和 Firebase 为 Instagram 克隆开发图像上传功能，但它似乎没有将图像上传到我的 Firebase 数据库。

我的图片上传组件有一个进度条、标题和图片上传按钮。当我点击按钮时，我可以选择文件，但进度条保持在 100%，永远不会重置，并且帖子不会呈现。

这是我的图片上传组件：

import React, { useState } from 'react';
import Button from '@material-ui/core/Button';
import { storage, db } from './firebase';
import './ImageUpload.css';

function ImageUpload({username}) {
  const [image, setImage] = useState(null);
  const [progress, setProgress] = useState(0);
  const [caption, setCaption] = useState('');

  const handleChange = (e) => {
    if (e.target.files[0]) {
      setImage(e.target.files[0]);
    }
  };
//Upload function
  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);
      },
      () => {
        storage
          .ref("images")
          .child(image.name)
          .getDownloadURL()
          .then(url => {
            db.collection("posts").add({

              caption: caption,
              imageUrl: url,
              username: username
            });
//resets values after upload on Image Upload box
            setProgress(0);
            setCaption("");
            setImage(null);
          });
      }
    );
  };

//Display
  return (
    <div className="imageupload">
      <progress className="imageupload_progress" value={progress} max="100" />
      <input type="text" placeholder="Enter a caption" onChange={event => setCaption(event.target.value)} value={caption} />
      <input type="file" onChange={handleChange} />
      <Button onClick={handleUpload}>
      Upload
      </Button>
    </div>
    )
}

export default ImageUpload

这是我的 firebase.js 文件（注意我更改了数据）：

import firebase from "firebase";

const firebaseApp = firebase.initializeApp({
  apiKey: "abc etc...",
  authDomain: "appname.firebaseapp.com",
  databaseURL: "https://appname.firebaseio.com",
  projectId: "projectid",
  storageBucket: "appname.appspot.com",
  messagingSenderId: "1234...",
  appId: "1:1a2b"
});

const db = firebaseApp.firestore();
const auth = firebase.auth();
const storage = firebase.storage();

export { db, auth, storage };

当我检查我的 Firebase 数据库时，没有任何内容上传到我的“帖子”集合中。

另外值得注意的是，我在一些帖子中进行了硬编码，但在我开始研究图像上传功能后，它们不再出现。我不确定这是否是我的 ImageUpload 或 Firebase 的问题。

Answer 1

const fileUploadHandler = () => {
  const uploadTask = storage.ref(`images/${image.name}`).put(image);

  uploadTask.on(
    "state_changed",
    (snapshot) => {
      const progress = Math.round(
        (snapshot.byteTransferred / snapshot.totalBytes) * 100
      );
      setProgress(progress);
    },

    (error) => {
      console.log(error);
      alert(error.message);
    },
    () => {
      storage
        .ref("images")
        .child(image.name)
        .getDownloadURL()
        .then((url) => {
          db.collection("posts").add({
            //sending to the database

            name: localStorage.getItem("username"),
            description: description,
            message: message,
            imageUrl: url || "",
            timestamp: firebase.firestore.FieldValue.serverTimestamp(),
          });

          setProgress(0);
          setImage(null);
          setDescription("");
          setMessage("");
        });
    }
  );
};