如何在 Firebase Extensions 使用 AngularFire 调整图像大小后获得新的下载 URL？

Question

在 Firebase 扩展调整图像大小后需要帮助获取调整图像大小URL。

在我能够使用下面的代码这样做之前。但是，激活该功能后，图像没有显示。在比较 Firestore 上的 imgURL 和 Firebase 存储上的下载 URL 之后，这些函数似乎在路径名的后面添加了图像尺寸 (500x500)。 (image_123 -> image_123_500x500).

1. 我已经尝试查找如何在 Firebase 扩展设置中排除它。但没有运气。 （可能会错过）

2. 我认为下一个选项是通过在调整图像大小后获取 URL 来调整代码本身。但是我要么未定义要么出错。另外，如果不通过 通过“先上传图像”然后“提交表单”创建两个单独的函数，我无法实现 。

      upload($event: any) {
        this.file = $event.target.files[0];
        this.image = true;
      }


        async submitHandler() {
        if (this.image === true) {
          // Generate random ID
          const randomId = Math.random().toString(36).substring(2);
          // The storage path
          const path = `products/${this.productForm.value.model}_${randomId}`;
          // Reference to storage bucket
          const ref = this.afStorage.ref(path);
          // The main task (upload Image to Firestorage)
          this.task = this.afStorage.upload(path, this.file);
    
          // Get the URL from ref (Firestorage), added to the form and submit to FIrestore
          this.task
            .snapshotChanges()
            .pipe(
              finalize(async () => {
                this.downloadURL = await ref.getDownloadURL().toPromise();
                /*this.afs
                .collection('products')
                .add({ downloadURL: this.downloadURL, path });*/
                this.loading = true;
                this.productForm.value.imgUrl = this.downloadURL;
                this.productForm.value.user = this.auth.getUserEmail();
                const formValue = this.productForm.value;
                try {
                  await this.afs.collection('products').add(formValue);
                  console.log(formValue);
                  this.success = true;
                } catch (err) {
                  console.error(err);
                }
              })
            ) // To display URL
            .subscribe();
    
          this.loading = false;
        } else {
          alert('Please upload the picture of product');
        }
      }

Answer 1

确实，Resize Image 扩展会在文件名中添加高度和宽度，如官方文档所述here. As clarified in this answer ，安装扩展后，它会要求您提供路径存储调整大小的文件的位置。因此，对于 return downloadURL，这将取决于您为路径添加的名称或者您是否没有添加任何名称。

因此，您需要从您在安装扩展程序时设置的路径中引用该文件。然后，您将需要根据为新维度设置的大小来处理文件的名称。您可以尝试按照将维度添加到文件名的方式进行操作。下面的代码基于这个答案here，我相信这应该可以帮助你作为起点。

function resizedName(fileName, dimensions = '500x500') {
  const extIndex = fileName.lastIndexOf('.');
  const ext = fileName.substring(extIndex);
  return `${fileName.substring(0, extIndex)}_${dimensions}${ext}`;
}

总而言之，您将需要处理 return 文件的新路径，如果它们与原始文件位于同一路径，您将需要修改它们的名称，将宽度和高度添加到名称中。