Question

我要在这里完成的事情很简单。

将文件上传到Firebase存储
获取指向文件的链接，并将其插入表单。

问题是，我无法获取下载URL。

当我上传内容时，它确实上传了，但是我收到了以下错误消息：

Object { code_: "storage/object-not-found", message_: "Firebase Storage: Object 'rnmgm3vvpz' does not exist.", serverResponse_: "{\n  \"error\": {\n    \"code\": 404,\n    \"message\": \"Not Found.  Could not get object\"\n  }\n}", name_: "FirebaseError" }

这是要在component.ts上上传的代码：

upload(event) {
  const id = Math.random().toString(36).substring(2);
  this.ref = this.afStorage.ref(id);
  this.task = this.ref.put(event.target.files[0]);
  this.uploadState = this.task.snapshotChanges().pipe(map(s => s.state));
  this.uploadProgress = this.task.percentageChanges();
  this.downloadURL = this.ref.getDownloadURL();
}

在component.html上：

<input type="file" (change)="upload($event)" accept=".png,.jpg" />

文件上传后如何获取downloadURL？

Answer 1

您应该在管道中添加finalize（），例如：

this.task.snapshotChanges().pipe(
  finalize(() => {
    this.downloadURL = this.ref.getDownloadURL(); // <-- Here the downloadURL is available.
  })
).subscribe();

在finalize（）步骤中，downloadURL可用，因此您可以异步地从ref中获取他。 -更新
您说您正在使用Angular 6，所以我假设您使用的是最新版本的Firebase。
他们将getDownloadURL（）从Task更改为Observable，因此只需获取实际的URL，就可以订阅。

this.task.snapshotChanges().pipe(
  finalize(() => {
    this.ref.getDownloadURL().subscribe(url => {
      console.log(url); // <-- do what ever you want with the url..
    });
  })
).subscribe();

Answer 2

this.angularFireStorage.upload("path_name", file).then(rst => {
        rst.ref.getDownloadURL().then(url => {
          console.log(url);
        })
      })

这就是答案。不想打两次电话。我的软件包版本是

“ @ angular / fire”：“ ^ 5.1.2”， “ firebase”：“ ^ 5.9.1”

Answer 3

ref.getDownloadURL()必须在task.snapshotChanges()完成后调用。

选项1：：您可以使用concat和defer执行ref.getDownloadURL()

concat(
  this.task.snapshotChanges().pipe(ignoreElements()) // ignore snapshot changes
  defer(() => this.ref.getDownloadURL()) // execute getDownloadURL when snapshot changes completed
).subscribe(url => console.log(url));

选项2：在switchMap完成后从ref.getDownloadURL()到task.snapshotChanges()。

this.task.snapshotChanges().pipe(
  last(),  // emit the last element after task.snapshotChanges() completed
  switchMap(() => this.ref.getDownloadURL())
).subscribe(url => console.log(url))

Answer 4

尝试一下，为我工作

task.snapshotChanges()
    .pipe(
          finalize(() => {
            this.downloadURL = fileRef.getDownloadURL();
            this.downloadURL.subscribe(downloadURLResponse => {
               console.log('downloadURL', downloadURLResponse);
            });
          }),
     )
    .subscribe();

Answer 5

这是所有进口商品的完整处理方法。

import { AngularFireStorage, AngularFireStorageReference, AngularFireUploadTask } from '@angular/fire/storage';
import {finalize} from 'rxjs/operators';

constructor(private afStorage:AngularFireStorage) { }

yourfile:File;

onsubmit(){
const id = Math.random().toString(36).substring(2);
const fileRef:AngularFireStorageReference=this.afStorage.ref("YourDir").child(id);
const task: AngularFireUploadTask =fileRef.put(this.yourfile);
task.snapshotChanges().pipe(
    finalize(() => {
        fileRef.getDownloadURL().subscribe(downloadURL => {
          this.profileurl=downloadURL;
            console.log(downloadURL);
        });
  })
).subscribe();
}

Angular 6-上传后获取Firebase Storage文件的下载URL

5 个答案: