如何在 Firestore 中获取图像位置，无需令牌和 alt 属性？

javascript

2024-03-07 17:09:49

从 Firestore 获取图像位置，无需令牌和 alt

背景

当你将文件上传到 Firestore 并尝试检索该文件时，你可能会遇到一个包含令牌和 alt 属性的下载 URL。但是，你可能只需要图像的文件位置，而不需要这些额外的信息。

解决方法

要从 Firestore 获取图像位置，无需令牌和 alt 属性，请遵循以下步骤：

1. 设置元数据

在上传文件之前，你需要创建一个指定文件 MIME 类型的元数据对象。

2. 获取文件名

使用 new Date().getTime() 创建一个唯一的文件名，然后添加图像文件名的扩展名。

3. 创建存储引用

使用 ref() 函数创建一个指向存储桶中特定文件位置的引用。

4. 上传任务

使用 uploadBytesResumable() 函数启动上传任务，并传递文件、元数据和存储引用作为参数。

5. 处理状态更改

注册状态更改侦听器，以跟踪上传进度并处理错误。

6. 获取下载 URL

上传任务完成后，使用 getDownloadURL() 函数获取文件的下载 URL。

示例代码

以下代码示例演示了上述步骤：

const handleImage = () => {
  // 设置元数据
  const metadata = {
    contentType: `image/${get_extension(image)}`
  };

  // 获取文件扩展名
  function get_extension(url) {
    let extension = url.toLowerCase().split(".").pop();

    return extension; // png, mp4, jpeg 等
  }

  // 创建唯一的文件名
  const filename = new Date().getTime() + image.substring(image.lastIndexOf("/") + 1);

  // 创建存储引用
  const storageRef = ref(storage, 'profileimages/' + filename);

  // 创建上传任务
  const uploadTask = uploadBytesResumable(storageRef, image, metadata);

  // 处理状态更改
  uploadTask.on('state_changed', 
    (snapshot) => {
      // ...
    }, 
    (error) => {
      // ...
    }, 
    () => {
      // 获取下载 URL
      getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
        // ...
      });
    }
  );
};