无法使用 on.() 通过 firebase 上传文件

Question

所以我知道这应该像从 firebase 存储文档中复制和粘贴一样简单，但老实说我不明白为什么 .on() 函数不起作用。作为参考，我可以进行上传，但我无法监控上传进度。我正在使用 React、Tailwinds 和 Firebase。我无法使用 .on() 监控上传，而只是使用 .then() 上传，并且填充正确上传，然后我可以在其他地方检索它，但我希望能够监控进度，但对于最后 3 个这些天一直无法弄清楚...希望有人可以提供帮助！ （ps项目是在我的网站上托管我的婚礼照片）

firebase 配置

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "*****",
  authDomain: "****",
  projectId: "*****",
  storageBucket: "******",
  messagingSenderId: "*******",
  appId: "****",
  measurementId: "******Y"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const proStorage = getStorage(app);
const proFirestore = getFirestore(app);

export {proStorage, proFirestore}

代码！

import React, { useEffect, useState } from 'react';
import {proStorage} from '../firebase/config';
import {ref, uploadBytes, listAll, getDownloadURL} from "firebase/storage"
import { v4  } from 'uuid';

const Uploadform = () => {
  const [imageUpload, setImageUpload] = useState(null)
  const [imageList,setImageList] = useState([])

  const upLoadImage = () =>{
    if (imageUpload ==null) return;
    const imageRef = ref(proStorage, `images/${imageUpload.name + v4()}`)     
    
    const uploadtask = uploadBytes(imageRef, imageUpload)
    uploadtask.on('state_changed', (snapshot) => {
    // Observe state change events such as progress, pause, and resume
    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
    const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log('Upload is ' + progress + '% done');
    switch (snapshot.state) {
      case 'paused':
        console.log('Upload is paused');
        break;
      case 'running':
        console.log('Upload is running');
        break;
    }
  }, 
  (error) => {
    // Handle unsuccessful uploads
  }, 
  () => {
    // Handle successful uploads on complete
    // For instance, get the download URL: https://firebasestorage.googleapis.com/...
    getDownloadURL(uploadtask.snapshot.ref).then((downloadURL) => {
      console.log('File available at', downloadURL);
    });
  }
);
    alert('Image Uploaded')
  }

  const imageListRef = ref(proStorage, "images/")
  useEffect(() => {
    listAll(imageListRef).then((response) => {
      response.items.forEach((item) => {
        getDownloadURL(item).then((url) => {
          setImageList((prev) => [...prev,url])
        })
      })
    })
    // eslint-disable-next-line
  },[])

  return (
    <div className='absolute h-full w-full flex justify-center items-center'>
      <div className='h-[50%] w-[50%] justify-center items-center border'>
        <div className='h-full w-full flex items-center justify-center'>
          <input  type='file' 
                  onChange={(e) => {setImageUpload(e.target.files[0])}}
                  console/>
          <button className='bg-black text-white' onClick={upLoadImage}>Upload Image</button>
        </div>
        {imageList.map((url) => {
            return <img src={url} alt='imgs'></img>
          })}
      </div>
    </div>
  )
}

export default Uploadform

错误

ERROR
uploadtask.on is not a function
TypeError: uploadtask.on is not a function
    at upLoadImage (http://localhost:3000/main.271f87fd8bd9fdcb1a1d.hot-update.js:38:16)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:45197:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:45241:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:45298:35)
    at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/bundle.js:45312:29)
    at executeDispatch (http://localhost:3000/static/js/bundle.js:49456:7)
    at processDispatchQueueItemsInOrder (http://localhost:3000/static/js/bundle.js:49482:11)
    at processDispatchQueue (http://localhost:3000/static/js/bundle.js:49493:9)
    at dispatchEventsForPlugins (http://localhost:3000/static/js/bundle.js:49502:7)
    at http://localhost:3000/static/js/bundle.js:49662:16
ERROR
uploadtask.on is not a function
TypeError: uploadtask.on is not a function
    at upLoadImage (http://localhost:3000/main.271f87fd8bd9fdcb1a1d.hot-update.js:38:16)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:45197:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:45241:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:45298:35)
    at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/bundle.js:45312:29)
    at executeDispatch (http://localhost:3000/static/js/bundle.js:49456:7)
    at processDispatchQueueItemsInOrder (http://localhost:3000/static/js/bundle.js:49482:11)
    at processDispatchQueue (http://localhost:3000/static/js/bundle.js:49493:9)
    at dispatchEventsForPlugins (http://localhost:3000/static/js/bundle.js:49502:7)
    at http://localhost:3000/static/js/bundle.js:49662:16
ERROR
uploadtask.on is not a function
TypeError: uploadtask.on is not a function
    at upLoadImage (http://localhost:3000/main.271f87fd8bd9fdcb1a1d.hot-update.js:38:16)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:45197:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:45241:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:45298:35)
    at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/bundle.js:45312:29)
    at executeDispatch (http://localhost:3000/static/js/bundle.js:49456:7)
    at processDispatchQueueItemsInOrder (http://localhost:3000/static/js/bundle.js:49482:11)
    at processDispatchQueue (http://localhost:3000/static/js/bundle.js:49493:9)
    at dispatchEventsForPlugins (http://localhost:3000/static/js/bundle.js:49502:7)
    at http://localhost:3000/static/js/bundle.js:49662:16

尝试使用 .on() 并报告它不是一个函数，同时使用 .then() 但无法跟踪进度

Answer 1

这是因为

uploadBytes()

方法不返回

UploadTask

。

您应该使用

uploadBytesResumable()

方法。