Firebase 存储 TypeScript 错误：“Promise<UploadResult>”类型上不存在属性“on”

Posted 2023-02-22

【中文标题】Firebase 存储 TypeScript 错误：“Promise<UploadResult>”类型上不存在属性“on”

【英文标题】：Firebase Storage TypeScript error: Property 'on' does not exist on type 'Promise<UploadResult>'

【发布时间】：2021-12-31 05:24:21

【问题描述】：

我正在尝试实现将文件上传到 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;

【参考方案1】：

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

uploadBytes() 返回一个包含 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);
);