NzUploadModule 与 AngularFireStorage答案

【问题标题】：NzUploadModule with AngularFireStorageNzUploadModule 与 AngularFireStorage
【发布时间】：2020-05-26 04:57:13
【问题描述】：

我正在尝试使用 AngularFireStorage 服务上传文件。文件已上传，我可以获取下载 URL，但我无法将状态（进度，下载 URL）传递给 nz-upload 组件。有人解决吗？我认为 S3 方式可能看起来很相似。

uploadFile = (item: UploadXHRArgs) => {
    console.log('call uploadFile');
    console.log(item);
    const file = item.file;
    const filePath = `${this.authService.user.uid}/${file.uid}`;
    const fileRef = this.storage.ref(filePath);
    const task = this.storage.upload(filePath, file)
    return task.snapshotChanges().pipe(
      finalize(() => {
        fileRef.getDownloadURL().subscribe(result => {
          console.log(result);
        });
      })
    )
      .subscribe();
  }

  handleChange({ file, fileList }: UploadChangeParam): void {
    console.log(file.status);
    const status = file.status;
    if (status !== 'uploading') {
      console.log(file, fileList);
    }
    if (status === 'done') {
      this.msg.success(`${file.name} file uploaded successfully.`);
    } else if (status === 'error') {
      this.msg.error(`${file.name} file upload failed.`);
    }
  }

在浏览器控制台中

call uploadFile 
Object { action: "", name: "file", headers: undefined, file: File, postFile: File, data: undefined, withCredentials: false, onProgress: onProgress(e), onSuccess: onSuccess(ret, xhr), onError: onError(xhr)
 } 
uploading 
https://firebasestorage.googleapis.com/v0/b/xxxx.appspot.com/o/bc7Q7zMxCWdJW0FtHrWtC0y6Vle2%2Fmnjvjqua0z?alt=media&token=6a50e16d-2b42-43b3-907a-add7f7a9b8f6

在页面上

【问题讨论】：

标签： ng-zorro-antd

【解决方案1】：

已解决，感谢https://github.com/ezhuo/ngx-alain/blob/master/src/app/@core/utils/image.compress.service.ts#L123

  uploadFile = (item: UploadXHRArgs) => {
    const file = item.file;
    const filePath = `${this.authService.user.uid}/${file.uid}`;
    const fileRef = this.storage.ref(filePath);
    const task = this.storage.upload(filePath, file);

    return task.snapshotChanges().pipe(
      finalize(() => {
        fileRef.getDownloadURL().subscribe(result => {
          item.onSuccess(result, item.file, result);
        });
      })
    )
      .subscribe(
        (result) => {
          const event = { percent: 0};
          event.percent = (result.bytesTransferred / result.totalBytes) * 100;
          item.onProgress(event, item.file);
        },
        err => {
          item.onError(err, item.file);
        }
      );
  }

附：仍在尝试理解item.onSuccess(result, item.file, result);，但上传、预览和进度，工作正常。

【讨论】：