ref 不是 function，firebase 存儲圖片上傳，reactJS

Question

大家好，我在嘗試將圖像上傳到我的 firebase 存儲時不斷收到此錯誤。

未處理的拒絕（類型錯誤）： firebase_index__WEBPACK_IMPORTED_MODULE_2 _.default.ref 不是 function

這是我試圖從中上傳圖像的組件。

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”，你的導入應該是這樣的，調用導出的object的具體屬性：

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

或者嘗試：

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