如何在使用AngularFire时获取Firebase扩展程序“Resize Images”生成的新下载URL？

Question

如何在使用AngularFire时获取Firebase扩展程序“Resize Images”生成的新下载URL？

angulargoogle-cloud-firestorefirebase-storageangularfirefirebase-extensions

4

需要帮助获取 Firebase 扩展调整图片大小后的缩放图 URL。之前我能通过以下代码实现，但在启动该函数后，图片未显示。将 Firestore 上的 imgURL 与 Firebase 存储上的下载 URL 进行比较后，似乎函数在路径的末尾添加了图像尺寸（500x500）（image_123 -> image_123_500x500）。

- 我尝试在 Firebase 扩展设置中查找如何排除它，但没有成功。（可能错过了） - 我想下一个选项就是通过获取调整图像后的 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');
        }
      }

- syahiruddin

你最后是怎么做的？只是用setTimeout调用downloadImageUrl吗？ - EmreAkkoc

1

@EmreAkkoc，这是一个很好的问题。虽然Firebase提供了一些解决方案，但可能还有改进的空间。你可以考虑一种方法，就是利用RXJS操作符，比如debounceTime或takeUntil，这些操作符可以增强你所需要的功能。 - syahiruddin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gso_gabriel · Accepted Answer

确实，如官方文档这里所述，Resize Image扩展将在文件名中添加高度和宽度。正如在这里所澄清的那样，一旦您安装了该扩展程序，它会要求您提供更改尺寸后的文件存储路径。因此，为了返回downloadURL，取决于您在路径中添加的名称或是否未添加任何名称。

因此，您需要从您安装扩展时设置的路径引用文件。然后，您需要根据新的尺寸重新命名文件，可以尝试以下方法向文件名添加尺寸。下面的代码基于这里的回答，我认为这应该作为一个起点帮助您。

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

总之，您需要在新路径上工作以将文件返回到那里，并且如果它们与原始文件在相同的路径中，则需要修改它们的名称，将其尺寸添加到名称中。