Estoy tratando de implementar un Vue Composable que cargue archivos en el almacenamiento de Firebase.
Estoy usando la versión modular de Firebase 9 y la estoy implementando copiando este ejemplo en sus documentos .
Pero ese ejemplo usa JavaScript simple y quiero implementarlo en TypeScript.
En mi código a continuación, .on arroja un error de TypeScript que dice que Property 'on' does not exist on type 'Promise<UploadResult>'.
¿Cómo resolver esto?
import { projectStorage } from "@/firebase/config"; import { ref, watchEffect } from "vue"; import { ref as storageRef, uploadBytes } from "firebase/storage"; const useStorage = (file: File) => { watchEffect(() => { // references const storageReference = storageRef(projectStorage, "images/" + file.name); // upload file const uploadTask = uploadBytes(storageReference, file); // upload progress uploadTask.on("state_changed", (snapshot: any) => { console.log(snapshot); }); }); }; export default useStorage;Debe usar uploadBytesResumable() en lugar de uploadBytes() si necesita monitorear el progreso de carga.
uploadBytes() devuelve una promesa que contiene un resultado de carga y las cargas no se pueden reanudar. Con uploadBytesResumable() , la carga se puede pausar y reanudar, y expone las actualizaciones de progreso.
Puede encontrar más información en la documentación .
import { ref as storageRef, uploadBytesResumable } from "firebase/storage"; const storageReference = storageRef(projectStorage, "images/" + file.name); const uploadTask = uploadBytesResumable(storageReference, file); uploadTask.on("state_changed", (snapshot: any) => { console.log(snapshot); });