NzUploadModule с AngularFireStorage - PullRequest
0 голосов
/ 26 мая 2020

Я пытаюсь загрузить файл с помощью сервиса AngularFireStorage. Файл загружен, и я могу получить URL-адрес загрузки, но я не могу передать статус (прогресс, downloadurl) компоненту 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

На странице Component view

1 Ответ

0 голосов
/ 26 мая 2020

Решено, благодаря 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);
        }
      );
  }

PS Все еще пытаюсь понять item.onSuccess(result, item.file, result);, но загружайте и просматривайте и прогресс, работает.

Success

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...