上载到firebase:TypeError:uploadTask.on不是函数 [英] Upload to firebase: TypeError: uploadTask.on is not a function

问题描述

我正在做一个反应POC，用于将图像上传到Firebase. 我已经遵循了Firebase文档

I am doing a react POC for upload image to firebase. I have followed the firebase documentation

也已引用此博客来自dev.to的帖子

反应版本:"^16.13.1", Firebase版本:"^7.15.5"，

react version: "^16.13.1", firebase version: "^7.15.5",

对于uploadTask.on()，我尝试了两种方法.

For uploadTask.on(), I tried two approaches.

1. 按原样放置其中的所有内容，即.不使用next, error and complete关键字.
2. 将代码分别放入每个代码，然后将它们传递到uploadTask.on()

1. put everything inside it as it is ie. not using next, error and complete keywords.
2. put the code separately into each one of them and pass them inside uploadTask.on()

我收到错误消息: TypeError: uploadTask.on is not a function

I am getting the error: TypeError: uploadTask.on is not a function

我已经多次查阅了文档，但是请确定我要去哪里了.

I have referred the documentation many times now, but sure where I am going wrong.

imageUpload component code

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


const ImageUpload = () => {
  const initImgState = { imgUrl: "" };
  const [imgAsFile, setImgAsFile] = useState("");
  const [imgAsUrl, setImgAsUrl] = useState(initImgState);
  const [progress, setProgess] = useState(0);

  const handleImgAsFile = (e) => {
    console.log("triggering handle image as file");
    const image = e.target.files[0];
    setImgAsFile((imgFile) => image);
  };

  const next = (snapShot) => {
    // takes the snapShot of each step of the process
    console.log(snapShot);
    const progress = Math.round(
      (snapShot.bytesTransferred / snapShot.totalBytes) * 100
    );
    setProgess(progress);
  };
  // error handling
  const error = (error) => {
    //catches the errors
    console.log(error);
  };
  const complete = () => {
    // gets the functions from storage refences the image storage in firebase by the children
    // gets the download url then sets the image from firebase as the value for the imgUrl key:
    storage
      .ref("images")
      .child(imgAsFile.name)
      .getDownloadURL()
      .then((fireBaseUrl) => {
        setImgAsUrl((prevObject) => ({
          ...prevObject,
          imgUrl: fireBaseUrl,
        }));
      });
  };

  const handleCloudUpload = (e) => {
    console.log("triggering handle upload");
    e.preventDefault();
    console.log("starting to upload");
    // checkin if the file is an image
    if (imgAsFile === "") {
      console.error(`not an image, the image file is a ${typeof imgAsFile}`);
      return <p>`not an image, the image file is a ${typeof imgAsFile}`</p>;
    }
    const uploadTask = () =>
      storage.ref(`/images/${imgAsFile.name}`).put(imgAsFile);
    // initiates upload to cloudserver ie firebase
    uploadTask.on(storage.TaskEvent.STATE_CHANGED, {
      next: next,
      error: error,
      complete: complete,
    });
  };
  return (
    <Fragment>
      <Form onSubmit={handleCloudUpload}>
        <Form.Group role="form">
          <ProgressBar animated now={progress} max="100" />
          <Form.File id="exampleFormControlFile1" onChange={handleImgAsFile} />
          <Button variant="outline-primary" type="submit">
            Upload File into Firbase
          </Button>
        </Form.Group>
      </Form>
      <p>Preview</p>
      <Image
        src={imgAsUrl.imgUrl || "http://via.placeholder.com/1024x1024"}
        fluid
      />
    </Fragment>
  );
};

firebase initialize code

import firebase from "firebase/app";
import "firebase/storage";

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "react-image-upload-and-c-bbd0f.firebaseapp.com",
  databaseURL: "https://react-image-upload-and-c-bbd0f.firebaseio.com",
  projectId: "react-image-upload-and-c-bbd0f",
  storageBucket: "react-image-upload-and-c-bbd0f.appspot.com",
  messagingSenderId: "73677178427",
  appId: "1:73677178427:web:149704e87714eff275fe1e",
  measurementId: "G-89WQ7XLYQK",
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();

const storage = firebase.storage();

export { storage, firebase as default };

推荐答案

没关系.弄清楚了.这是一个简单的愚蠢的错字.

Nevermind. figured it out. it was a simple dumb typo.

必须对此进行更改:

const uploadTask = () =>
      

对此:

const uploadTask =
  

这篇关于上载到firebase:TypeError:uploadTask.on不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！