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

Posted 2023-03-22

【中文标题】ref 不是函数，firebase 存储图片上传，reactJS

【英文标题】：ref is not a function, firebase storage image upload, reactJS

【发布时间】：2020-12-11 13:55:27

【问题描述】：

大家好，我在尝试将图像上传到我的 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 >
        <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  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,
;

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

【参考方案1】：

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

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

或者试试：

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

【讨论】：

嗨，我不知道为什么，但我一直收到此错误尝试导入错误：'storage' 不是从'../firebase/index' 导出的。

我提出了另一个建议。