Firebase Storage TypeScript error: Property 'on' does not exist on type 'Promise<UploadResult>'

Question

我正在尝试实现一个将文件上传到 Firebase 存储的 Vue Composable。

我正在使用模块化 Firebase 版本 9 并通过复制 this example in their docs.

来实现它

但是那个例子使用了普通的 JavaScript，我想用 TypeScript 实现它。

在我下面的代码中 .on 抛出了一个 TypeScript 错误，上面写着 Property 'on' does not exist on type 'Promise<UploadResult>'.

如何解决这个问题？

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;

Answer 1

如果您需要监控上传进度，您必须使用 uploadBytesResumable() 而不是 uploadBytes()。

uploadBytes() return 包含 UploadResult 且上传不可恢复的 Promise。使用 uploadBytesResumable()，可以暂停和恢复上传，并显示进度更新。

您可以在 documentation 中找到更多信息。

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);
});

Firebase Storage TypeScript error: Property 'on' does not exist on type 'Promise<UploadResult>'

Firebase Storage TypeScript error: Property 'on' does not exist on type 'Promise<UploadResult>'

firebase

typescript

vue.js

firebase-storage