ref 不是函数，firebase 存储图片上传，reactJS

Question

大家好，我在尝试将图像上传到我的 Firebase 存储时不断收到此错误。

未处理的拒绝（TypeError）：firebase_index__WEBPACK_IMPORTED_MODULE_2_.default.ref 不是函数

这是我尝试从中上传图片的组件。

import React, { useState, useEffect } from 'react';
import storage from '../firebase/index';

// Imported components
import Section from '../components/Layout/Section';
import Container from '../components/Layout/Container';
import Dropzone from 'react-dropzone';

function FolderProjectUpload() {
  const [file, setFile] = useState(null);
  const [url, setURL] = useState('');

  function handleChange(e, acceptedFiles) {
    setFile(acceptedFiles);
  }

  function handleUpload(e, acceptedFiles) {
    const uploadTask = storage
      .ref(`/images/${acceptedFiles.name}`)
      .put(acceptedFiles);
    uploadTask.on('state_changed', console.log, console.error, () => {
      storage
        .ref('images')
        .child(acceptedFiles.name)
        .getDownloadURL()
        .then((url) => {
          setFile(null);
          setURL(url);
        });
    });
  }

  return (
    <Section justifyContent="center">
      <Container width="1080px">
        <Dropzone onDrop={handleUpload}>
          {({ getRootProps, getInputProps }) => (
            <section>
              <div {...getRootProps()}>
                <input {...getInputProps()} onChange={handleChange} />
                <p>Drag 'n' drop some files here, or click to select files</p>
              </div>
            </section>
          )}
        </Dropzone>
        <Container width="50%" background="white"></Container>
      </Container>
    </Section>
  );
}

export default FolderProjectUpload;

这就是我将存储导入 Firebase 配置的方式：

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

firebase.initializeApp({
  apiKey: 'XY',
  authDomain: 'XY',
  databaseURL: 'XY',
  projectId: 'XY',
  storageBucket: 'XY',
  messagingSenderId: 'XY',
  appId: 'XY',
  measurementId: 'XY',
});

let db = firebase.firestore();
let storage = firebase.storage();

export default {
  firebase,
  db,
  storage,
};

有人知道我做错了什么吗？

Answer 1

我认为您的导入行是错误的。假设您显示的第二个文件是“../firebase/index”，那么您的导入应该是这样的，以调出导出对象的特定属性：

import { storage } from '../firebase/index';

或者试试：

import firebase from '../firebase/index';
let storage = firebase.storage();