javascript - 类型错误 : Cannot read property 'ref' of undefined Firebase-storage react

Question

我正在制作一个应用，用户可以上传文件并存储在 Firebase 存储中。
当我单击上传时，不断收到错误“TypeError:无法读取未定义的属性“ref””
firebase 配置看起来正确。
非常感谢任何帮助和提示!

这是我的代码

import React from "react";
import firebase from "./services/firebase";
import storage from "./services/firebase";

export class Upload extends React.Component {
  constructor(props) {
    super(props);
    this.state = { image: null, url: "" };
    this.handleUpload = this.handleUpload.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    console.log(event.target.files[0]);
    if (event.target.files[0]) {
      const image = event.target.files[0];
      this.setState({ image: image });
    }
  }

  handleUpload() {
    const image = this.state.image;
    console.log(image);
    const uploadTask = firebase.storage.ref(`images/${image.name}`).put(image);
    uploadTask.on("state_changed", () => {
      firebase.storage
        .ref("images")
        .child(image.name)
        .getDownloadURL()
        .then(url => {
          this.setState({ url });
        });
    });
  }

  render() {
    console.log(this.state.image);
    return (
      <div className="upload">
        <h2 className="title">Upload content for your project</h2>
        <div className="container">
         <label>Photo</label>
                <img src="/imgs/P.png" alt="photo" />
                <input
                  type="file"
                  accept=".jpg, image/png, .jpeg, .gif"
                  onChange={this.handleChange}
                />
                <button onClick={this.handleUpload}>Upload</button>
        </div>
     </div>
    );
  }
}

这是“./services/firebase”文件

import firebase from "firebase/app";
import "firebase/database";
import "firebase/auth";
import "firebase/storage";
import "firebase/firestore";
import config from "./config";


const firebaseConfig = config;


firebase.initializeApp(firebaseConfig);


const database = firebase.database();


const listenTo = (dataToListenTo = "", callbackFunction = () => {}) => {
  const databaseRef = database.ref(dataToListenTo);

  databaseRef.on("value", snapshot => {
    callbackFunction(snapshot);
  });

  return databaseRef;
};


const writeTo = (dataToWriteTo = "", value) => {
  const databaseRef = database.ref(dataToWriteTo);

  databaseRef.push(value);
};


const update = (keyToUpdate = "", value) => {
  const databaseRef = database.ref(keyToUpdate);

  databaseRef.update(value);
};


const remove = (keyToUpdate = "") => {
  const databaseRef = database.ref(keyToUpdate);

  databaseRef.remove();
};


const getCurrentUser = () => {
  return firebase.auth().currentUser;
};


const isLoggedIn = () => {
  if (firebase.auth().currentUser) {
    return true;
  }

  return false;
};

const signIn = (email, password) => {
  return firebase.auth().signInWithEmailAndPassword(email, password);
};


const onLoginChange = (callbackFunction = () => {}) => {
  const authRef = firebase.auth().onAuthStateChanged(user => {
    callbackFunction(user);
  });

  return authRef;
};


const signOut = () => {
  return firebase.auth().signOut();
};

const createUser = (email, password) => {
  return firebase.auth().createUserWithEmailAndPassword(email, password);
};

export default {
  writeTo,
  listenTo,
  update,
  remove,
  getCurrentUser,
  isLoggedIn,
  signIn,
  onLoginChange,
  signOut,
  createUser
};

我做错了什么？

Answer 1

storage() 是一种方法而不是属性，因此在您的代码中您应该使用以下内容:

firebase.storage().ref(`images/${images.name}`)


firebase.storage().ref("images")

查看此处了解更多信息:

https://firebase.google.com/docs/reference/js/firebase.storage.html