Question

嘿，我在尝试将图像上传到我的Firebase存储器时一直出现此错误。

未处理的拒绝（类型错误）： firebase_index__WEBPACK_IMPORTED_MODULE_2 _。default.ref不是函数

这是我要从中上传图像的组件。

axios.post(`http://127.0.0.1:8000/api/${this.endpoint}/`, fd, axiosConfig)
        .then(res => {                       
          let newPictureUrl = res.data.picture_1
          let newPictureId = res.data.id
          let addPicDic = {"url": newPictureUrl, "id": newPictureId}          
          store.addPicture(addPicDic) })

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

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;

有人对我在做什么错有想法吗？

Answer 1

我认为您的导入行有误。假设显示的第二个文件是“ ../firebase/index”，则导入应如下所示，以调出导出对象的特定属性：

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

或尝试：

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

ref不是函数，firebase存储映像上传，reactJS

1 个答案: