如何使用 ReactJS 获取 Firebase 存储中文件的元数据？

Firebase 是一个由 Google 提供的实时数据库和存储解决方案。它被广泛用于 Web 和移动应用程序的开发中。在 Firebase 中，文件存储服务提供了一个简单而强大的方式来存储和管理文件。在本文中，我们将学习如何使用 ReactJS 获取 Firebase 存储中文件的元数据。

步骤一：在 Firebase 控制台中设置文件存储

在 Firebase 控制台中，创建一个新的存储桶，并在其中上传一些文件。在本例中，我们将上传一个名为 'example.txt' 的文本文件。此外我们也需要确保我们已经安装了 Firebase 和 React 的 SDK。可以使用下面的命令在 React 项目中安装它们：

npm install firebase react-firebase-hooks

步骤二：使用 ReactJS 设置 Firebase 存储

在 React 项目的根目录下，创建一个名为 'firebase.js' 的新文件。在其中，我们需要创建一个 Firebase 实例并暴露出它。在如下代码片段中，我们从 Firebase 控制台中获取了 Firebase 配置，并设置存储服务：

import firebase from 'firebase/app';
import 'firebase/storage';

const firebaseConfig = {
  // get Firebase config from Firebase Console
};
 
firebase.initializeApp(firebaseConfig);
 
const storage = firebase.storage();
 
export { storage, firebase as default };

步骤三：使用 ReactJS 获取 Firebase 存储中的文件元数据

在 React 组件中，我们可以使用 'useGetDownloadURL' 钩子从 Firebase 存储中获取文件的 URL。一旦我们有了文件的 URL，我们可以使用 'useEffect' 钩子监听 URL 的更改，并使用 'getMetadata' 函数获取文件的元数据。代码片段如下：

import React, { useState, useEffect } from 'react';
import { storage } from './firebase';
import { useGetDownloadURL } from 'react-firebase-hooks/storage';
 
function App() {
  const [url, setUrl] = useState(null);
  const [metadata, setMetadata] = useState(null);
  const [error, setError] = useState(null);
 
  const [path, setPath] = useState('example.txt');
  const [bucket, setBucket] = useState('gs://my-app.appspot.com');
  
  const [downloadUrl, firebaseUrlLoading, firebaseUrlError] = useGetDownloadURL(
    storage.refFromURL(`${bucket}/${path}`)
  );
  
  useEffect(() => {
    if (downloadUrl) {
      storage.refFromURL(downloadUrl).getMetadata()
        .then((meta) => {
          setMetadata(meta);
        })
        .catch((err) => {
          setError(err);
        });
    }
  }, [downloadUrl]);
 
  return (
    <div className="App">
      <input type="text" value={path} onChange={e => setPath(e.target.value)} />
      <input type="text" value={bucket} onChange={e => setBucket(e.target.value)} />
      {firebaseUrlLoading && <div>Loading...</div>}
      {firebaseUrlError && <div>Error: {firebaseUrlError.message}</div>}
      {url && <img src={url} alt="My image" />}
      {metadata && (
        <ul>
          <li>File name: {metadata.name}</li>
          <li>File size: {(metadata.size / 1000).toFixed(2)} KB</li>
          <li>File type: {metadata.contentType}</li>
          <li>Created on: {metadata.timeCreated}</li>
        </ul>
      )}
    </div>
  );
}

上面的代码片段中，我们首先引入了所有需要使用的 React hook、Firebase SDK 和我们自己的 'firebase.js' 文件。在组件中，我们使用 'useState' 钩子来管理状态：URL、元数据、错误信息。我们使用 'useGetDownloadURL' 钩子从 Firebase 存储中异步获取文件的 URL。我们还使用 'useState' 钩子在输入中更新文件的路径和存储桶。

我们使用 'useEffect' 钩子来监听文件 URL 更改，并使用 'getMetadata' 函数异步获取文件的元数据。这些元数据包括文件名称、大小、内容类型和创建日期。获取元数据后，我们通过 'useState' 钩子更新元数据状态。

最后，我们在组件的渲染函数中展示文件元数据，并在出现错误时显示错误信息。

总结

在本文中，我们学习了如何使用 ReactJS 和 Firebase SDK 在存储服务中获取文件元数据。我们首先设置了 Firebase 存储，并使用 'useGetDownloadURL' 和 'getMetadata' 钩子简化了操作。虽然这个过程可能有一些复杂，但它提供了一种可靠的方式来存储和管理您的应用程序数据。