Question

我有一个使用Firebase存储映像服务的应用程序，但对如何处理它感到有些困惑。

在我要描述的两种方法中，我不确定这是否是最佳途径。

1-第一种方法

我用它来上传我的图片列表

right_image.attr("src", "https://www.example.com/")

上传后，我将每个图像的路径存储在数据库中，以像这样从firebase进行检索：

Qs <- unlist(lapply(grep("[a-zA-Z]*Q[0-9][0-9]?", File, perl = TRUE),
function(x)
{
  if(grepl(" +[0-9]", File[x + 1])) postfix <- "" else postfix <- File[x + 1]
  if (grepl("Missing", File[x - 1])) prefix <- "" else prefix <- File[x - 1]
  return(paste(prefix, File[x], postfix, sep = "  "))
}))

Qs <- unlist(lapply(strsplit(Qs, "(  )+"), function(x)
{
  question <- gsub(" ", "", x[grep("Q[0-9][0-9]?", x)])
  text <- paste(question,":", paste(x[nchar(x) > 6], collapse = " "))
  names(text) <- question
  return(text)
}))

Qs <- gsub(" +", " ", Qs)

然后从Firebase上的图像中检索URL，这是我的这种方法的问题，我有一个DataTable，该数据表返回对象列表以及该对象内部的文件数组，这些文件具有从我保存在数据库中的图像的路径

我不知道如何在ngFor中循环并从对象检索路径，同时向Firebase发出请求并检索图像。

2-第二种方法

Qs
#> Q13 
#> "Q13 : During the past 30 days, on how many days did you carry a weapon such as a gun, knife, or club on school property?" 
#> 
#> Q14
#> "Q14 : During the past 12 months, on how many days did you carry a gun?" 
#>
#> Q15 
#> "Q15 : During the past 30 days, on how many days did you not go to school because you felt you would be unsafe at school or on your way to or from school?" 
#>
#> Q16 
#> "Q16 : During the past 12 months, how many times has someone threatened or injured you with a weapon such as a gun, knife, or club on school property?"

在我上传文件的同时，我获得了downloadUrl，并使用将要下载并发送到我的数据库的downloadUrl创建了一个对象，这种方法的问题是 SLOW 在我上传文件的同时检索此URL。

结论

我现在正在尝试使用异步管道执行此操作，但是遇到了一些小问题，例如：

 const fileName = `/${new Date().getTime()}_${this.fileList[i].name}`;
        const path = this.userModel.companyCode + fileName;

        // Totally optional metadata
        const customMetadata = { app: 'My AngularFire-powered PWA!' };

        this.storage.upload(path, this.fileList[i], { customMetadata });

        imageList.push({ file_path: path, file_name: fileName });

在HTML中：

 const fileRef = this.storage.ref(urlImage);
  fileRef.getDownloadURL().subscribe(url => {
    console.log(url);
  });

它起作用了，但是我在此处为测试建议提供了一个静态图像链接 const fileRef = this.storage.ref（'* '）; **。

所以我必须使此动态for循环列表img源数据

this.task.snapshotChanges().pipe(
          finalize( async() =>  {
            await observableList.push(fileRef.getDownloadURL());    
            fileRef.getDownloadURL().subscribe(url => {
              console.log(url);
            });
          }),
        ).subscribe();

在ts文件中：

public imageUrl$: Observable<string>;

this.imageUrl$ = this.getImageUrl();

  getImageUrl() {
      console.log('ENTROU NO GET IMAGE');
      const fileRef = this.storage.ref('***');
      return fileRef.getDownloadURL();
  }

就像当我将一个函数直接从图像的[src]中返回一个可观察对象的函数一样，该怎么办？

在Angular 7应用程序上从Firebase加载图像的最佳方法

0 个答案: