Firebase 存储

Firebase 存储 是 Firebase 的云存储服务。它允许您存储和提供用户生成的内容，例如图像、音频、视频和其他文件。虽然大多数 API 可以像您通常使用 Firebase 一样使用，但 VueFire 公开了几个可组合函数，以便更好地与 Vue 集成，这些函数不仅让您访问响应式变量，还让您访问一些操作，例如 upload()，以便在保持响应式变量更新的同时更新文件。

安装

您不需要安装任何特定内容来使用 Firebase 存储与 VueFire。只需从 vuefire 中导入您需要的不同可组合函数，您就可以开始使用了。

您可以使用可组合函数 useFirebaseStorage() 从任何组件中访问 Firebase 存储。

上传文件

您可以使用 useStorageFile() 可组合函数上传文件并监控上传进度。这还公开了文件上传后的 URL 及其元数据，让我们从一个完整的表单上传示例开始

<script setup lang="ts">
// See https://vueuse.org.cn/core/useFileDialog
import { useFileDialog } from '@vueuse/core'
import { ref as storageRef } from 'firebase/storage'
import { useFirebaseStorage, useStorageFile } from 'vuefire'

const storage = useFirebaseStorage()
const mountainFileRef = storageRef(storage, 'images/mountains.jpg')

const {
  url,
  // gives you a percentage between 0 and 1 of the upload progress
  uploadProgress,
  uploadError,
  // firebase upload task
  uploadTask,
  upload,
} = useStorageFile(mountainFileRef)

function uploadPicture() {
  const data = files.value?.item(0)
  if (data) {
    upload(data)
  }
}

const filename = ref<string>()
const { files, open, reset } = useFileDialog()
</script>

<template>
  <form @submit.prevent="uploadPicture">
    <!-- disable the form while uploading -->
    <fieldset :disabled="!!uploadTask">
      <button
        type="button"
        @click="open({ accept: 'image/*', multiple: false })"
      >
        <template v-if="files?.length === 1">
          Selected file: {{ files.item(0)!.name }} (Click to select another)
        </template>
        <template v-else> Select one picture </template>
      </button>

      <br />

      <button>Upload</button>
    </fieldset>
  </form>
</template>

上传图片后，您可以使用 url 响应式变量。例如，如果是图像，您可以显示它

<img v-if="url" :src="url" />

下载文件

VueFire 还公开了一个较小的可组合函数，它只检索文件的 URL。如果您不需要上传文件，而只需要显示它，这很有用

<script setup lang="ts">
import { useFileDialog } from '@vueuse/core'
import { ref as storageRef } from 'firebase/storage'
import { useFirebaseStorage, useStorageFile } from 'vuefire'

const storage = useFirebaseStorage()
const mountainFileRef = storageRef(storage, 'images/mountains.jpg')
const {
  url,
  // refresh the url if the file changes
  refresh,
} = useStorageFileUrl(mountainFileRef)
</script>

文件元数据

与访问文件 URL 的方式相同，您也可以访问文件元数据。您还可以使用 update() 函数更新元数据并保持响应式变量更新

<script setup lang="ts">
import { useFileDialog } from '@vueuse/core'
import { ref as storageRef } from 'firebase/storage'
import { useFirebaseStorage, useStorageFile } from 'vuefire'

const storage = useFirebaseStorage()
const mountainFileRef = storageRef(storage, 'images/mountains.jpg')
const {
  metadata,
  // manually refresh the metadata
  refresh,
  // update metadata
  update,
} = useStorageFileMetadata(mountainFileRef)
</script>

请注意，元数据也可以在 useStorageFile() 可组合函数中访问。