电容器火地库云存储插件

非官方电容插件 火地云存储[^1]

使用大小写

Firebase云存储插件通常用于存储和服务用户生成的内容,例如:

• 用户生成的内容: 上传由您的用户创建的照片或其他文件到 Cloud 存储.
• 文件下载: 将文件下载到Android和iOS或作为本地文件系统 Blob 在网络上.
• 内容交付: 获取文件的下载 URL 以显示或共享.
• 文件管理:在目录中列出文件,读取并更新其元数据,或删除.

兼容性

指南

• 使用 Capacitor 的 Firebase 存储上传和管理文件( M): 用此插件上传,下载并管理用户生成的文件.
• 如何用电容和火把包扎角相机: 使用此插件与 Cloud Firestore 并列存储并服务用户加载的文件 .
• 如何在电容App中使用火把:共享的Firebase设置,以及文件存储如何与数据库和登录对等.

安装

你可以用我们的 AI 辅助设置 以安装插件. 添加数据 超级技能 至您的 AI 工具,使用以下命令:

npx skills add capawesome-team/skills --skill capacitor-plugins

然后使用下列提示:

Use the `capacitor-plugins` skill from `capawesome-team/skills` to install the `@capacitor-firebase/storage` plugin in my project.

如果你喜欢 手动设置,通过运行以下命令来安装插件,并遵循下面的平台特定指令:

npm install @capacitor-firebase/storage
npx cap sync

如果您还没有将 Firebase 添加到您的项目中(机器人 编号 : iOS系统) (中文(简体) ).

机器人

变量

如果需要, 您可以在您的应用程序中定义以下工程变量 variables.gradle 要更改依赖的默认版本的文件 :

• $firebaseStorageVersion 版本 com.google.firebase:firebase-storage (默认 : 22.0.1(中文(简体) )

如果您在工程中遇到其它插件的依赖性冲突, 这会有所帮助 .

iOS系统

Swift 软件包管理器

在您的 capacitor.config.json (或 capacitor.config.ts) 避免 SwiftPM 软件包识别相撞数字 :

{
  "experimental": {
    "ios": {
      "spm": {
        "packageOptions": {
          "@capacitor-firebase/storage": {
            "symlink": true
          }
        }
      }
    }
  }
}

请注意目标 packageOptions 支持需要控制器 CLI 8.4.0+ (中文(简体) )。 。 。 .

配置

此插件不需要配置 .

演示

这里有一个实例: robingenz/电容器-火力基地-插座-demo

启动模板

以下启动模板可供使用:

• 角起火点

使用量

以下例子显示如何上传并下载文件,获得下载URL,列出文件,读取并更新文件元数据,删除文件,并连接到"云存储模拟器".

上传文件

上传文件到 Cloud 存储器 。 在Android和iOS上,提供 uri 到要上传的文件。 在网络上提供上传数据 Blob 使用 blob 选项。 随着上传进度和 completed 设置为 true 上传完成后 :

import { FirebaseStorage } from '@capacitor-firebase/storage';

const uploadFile = async () => {
  return new Promise((resolve, reject) => {
    FirebaseStorage.uploadFile(
      {
        path: 'images/mountains.png',
        uri: 'file:///var/mobile/Containers/Data/Application/E397A70D-67E4-4258-236E-W1D9E12111D4/Library/Caches/092F8464-DE60-40B3-8A23-EB83160D9F9F/mountains.png',
      },
      (event, error) => {
        if (error) {
          reject(error);
        } else if (event?.completed) {
          resolve();
        }
      }
    );
  });
};

下载文件

从 Cloud 存储器下载文件 。 在Android和iOS上,文件被下载到本地文件系统,使用 uri 选项。 在 Web 上, 下载的文件被返回为 Blob 在召回事件中:

import { FirebaseStorage } from '@capacitor-firebase/storage';

const downloadFileWithFirebaseStorage = async () => {
  return new Promise((resolve, reject) => {
    FirebaseStorage.downloadFile(
      {
        path: 'images/mountains.png',
        uri: 'file:///var/mobile/Containers/Data/Application/E397A70D-67E4-4258-236E-W1D9E12111D4/Library/Caches/mountains.png', // Only available for Android and iOS
      },
      (event, error) => {
        if (error) {
          reject(error);
        } else if (event?.completed) {
          // On Web, the downloaded file is available as a Blob in event.blob
          resolve(event?.blob);
        }
      }
    );
  });
};

以文件系统插件下载文件

或者,您可以检索文件的下载 URL,并使用官方下载 电容文件系统 插件 :

import { FirebaseStorage } from '@capacitor-firebase/storage';
import { Filesystem, Directory } from '@capacitor/filesystem';

const downloadFileWithFilesystem = async () => {
  const { downloadUrl } = await FirebaseStorage.getDownloadUrl({
    path: 'images/mountains.png',
  });
  const { path } = await Filesystem.downloadFile({
    url: downloadUrl,
    path: 'mountains.png',
    directory: Directory.Cache,
  });
  return path;
};

获取下载 URL

获取文件的下载 URL, 例如要显示或共享它 :

import { FirebaseStorage } from '@capacitor-firebase/storage';

const getDownloadUrl = async () => {
  const { downloadUrl } = await FirebaseStorage.getDownloadUrl({
    path: 'images/mountains.png',
  });
  return downloadUrl;
};

在目录中列出文件

在目录中列出文件 。 使用 maxResults 财务报告和审定财务报表 pageToken 通过大目录粘接的选项 :

import { FirebaseStorage } from '@capacitor-firebase/storage';

const listFiles = async () => {
  const { items } = await FirebaseStorage.listFiles({
    path: 'images',
  });
  return items;
};

读取和更新文件元数据

读取文件的元数据, 如大小、 内容类型和时间戳, 或更新文件, 包括用户定义的自定义元数据 :

import { FirebaseStorage } from '@capacitor-firebase/storage';

const getMetadata = async () => {
  const result = await FirebaseStorage.getMetadata({
    path: 'images/mountains.png',
  });
  return result;
};

const updateMetadata = async () => {
  await FirebaseStorage.updateMetadata({
    path: 'images/mountains.png',
    metadata: {
      contentType: 'image/png',
      customMetadata: {
        foo: 'bar',
      },
    },
  });
};

删除文件

删除 Cloud 存储中的文件 :

import { FirebaseStorage } from '@capacitor-firebase/storage';

const deleteFile = async () => {
  await FirebaseStorage.deleteFile({
    path: 'images/mountains.png',
  });
};

使用云存储模拟器

开发期间,您可以将您的应用程序装配到本地的"云存储"模拟器上. 当使用Android模拟器设备时, 10.0.2.2 是连接到 localhost 的计算机。 请注意,在Android上,必须允许明确文本的流量,而该流量并非用于生产:

import { FirebaseStorage } from '@capacitor-firebase/storage';

const useEmulator = async () => {
  await FirebaseStorage.useEmulator({
    host: '10.0.2.2',
    port: 9001,
  });
};

API 密码

• deleteFile(...)
• getDownloadUrl(...)
• getMetadata(...)
• listFiles(...)
• updateMetadata(...)
• downloadFile(...)
• uploadFile(...)
• useEmulator(...)
• 接口
• 类型异名

删除文件(...)

deleteFile(options: DeleteFileOptions) => Promise<void>

删除文件 .

自: 5.3.0 (中文(简体) )

获得下载Url(...)

getDownloadUrl(options: GetDownloadUrlOptions) => Promise<GetDownloadUrlResult>

获取下载 URL 文件 .

回返情况: Promise<GetDownloadUrlResult>

自: 5.3.0 (中文(简体) )

获取气象数据(...)

getMetadata(options: GetMetadataOptions) => Promise<GetMetadataResult>

获取文件的元数据 .

回返情况: Promise<GetMetadataResult>

自: 5.3.0 (中文(简体) )

列表 Files (...)

listFiles(options: ListFilesOptions) => Promise<ListFilesResult>

在目录中列出文件 .

回返情况: Promise<ListFilesResult>

自: 5.3.0 (中文(简体) )

更新Metadata (...)

updateMetadata(options: UpdateMetadataOptions) => Promise<void>

更新一个文件的元数据 .

自: 5.3.0 (中文(简体) )

下载文件(...)

downloadFile(options: DownloadFileOptions, callback: DownloadFileCallback) => Promise<CallbackId>

下载文件 .

打开 机器人 财务报告和审定财务报表 iOS系统,文件下载到本地文件系统 使用 uri 选项.

打开 网页,文件被下载为 Blob 并返回到 调用事件 .

回返情况: Promise<string>

自: 8.2.0 (中文(简体) )

上传文件(...)

uploadFile(options: UploadFileOptions, callback: UploadFileCallback) => Promise<CallbackId>

上传文件 .

回返情况: Promise<string>

自: 5.3.0 (中文(简体) )

使用计算器(...)

useEmulator(options: UseEmulatorOptions) => Promise<void>

您的应用程序可以和云存储模拟器交谈.

在Android上,必须允许明确文本的流量. 关于电容配置 :

{
  server: {
    cleartext: true
  }
}

明确文本流量并非用于生产.

自: 6.1.0 (中文(简体) )

接口

删除文件选项

获取下载Url Result

获取下载

获取元数据结果

获取气象数据选项

列表文件夹

存储参考

列表文件选项

更新元数据选项

设置元数据

下载文件选项

下载文件CallbackEvent

上传文件选项

上传元数据

上传文件CallbackEvent

使用编辑器选项

类型异名

下载回调文件

(event: DownloadFileCallbackEvent | null, error: any): void

调用文件夹

string

上传FileCallback

(event: UploadFileCallbackEvent | null, error: any): void

财务问题

我如何追踪上传或下载的进展?

这个 uploadFile(...) 财务报告和审定财务报表 downloadFile(...) 方法接受一个以包含 progress 作为0至1和a之间的分数 completed 旗帜。 这个 bytesTransferred 财务报告和审定财务报表 totalBytes 属性仅在Android和Web上可用.

不同平台对文件的下载有何不同?

在Android和iOS上,文件被下载到本地文件系统,使用 uri 选项。 在 Web 上, 下载的文件被返回为 Blob 在召回活动中。 或者,您可以用 getDownloadUrl(...) 并使用 Capacitor 文件系统插件下载文件,如 使用示例 见上文.

我该如何上传用户选择的文件 ?

在Android和iOS上,通过 uri 打开 uploadFile(...) 方法。 在网络上,通过数据作为 Blob 使用 blob 选项。 你可以用这个 文件拾取器 让用户在设备上选择文件的插件.

我如何存储关于文件的额外信息?

您可以在上传文件时为它设置元数据 metadata 选项或稍后更新 updateMetadata(...),包括通过 customMetadata启用 getMetadata(...) 以读取文件的元数据,例如其大小、内容类型和时间戳.

我能测试一下云存储模拟器吗?

是的,用那个 useEmulator(...) 将您的应用程序装配到本地 Cloud 存储模拟器上的方法, 如 使用示例 页:1 在Android模拟器设备上测试时,请使用 10.0.2.2 作为到达 localhost 的计算机。 记住,在Android上,必须允许清晰文本的流量,这并非用于生产.

相关插件

• 文件拾取器:让用户从设备中选择文件,目录,图像,或视频.
• 文件压缩器:在上传前压缩PNG,JPEG等文件和WebP图像.
• 火地云炉: Cloud Firestore中存储并同步应用数据.

通讯

随时更新有关卡帕韦索姆、Capacitor和Ionic生态系统的最新消息和最新消息,因为我们 《卡帕索克通讯》。 。 。 .

更改日志

见 变动情况。 。 。 .

许可证

见 自由主义。 。 。 .

[^1]: 这个项目不附属于Google LLC或其任何子公司或子公司,也不获得其认可、支持、赞助或批准.