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

【问题标题】：Firebase Storage TypeScript error: Property 'on' does not exist on type 'Promise<UploadResult>'Firebase 存储 TypeScript 错误：“Promise<UploadResult>”类型上不存在属性“on”
【发布时间】：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;

【问题讨论】：

标签： typescript firebase vue.js firebase-storage

【解决方案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);
});

【讨论】：