Наблюдаемый следующий не испускает - PullRequest
Новая
       12

Наблюдаемый следующий не испускает

1 голос
/ 13 июля 2020

У меня есть эта простая функция для помещения файла в S3: 

putFile$(S3AuthorizationToken: S3AuthorizationToken, file: File) {
    const futureFile: FutureFile = {
      size: file.size,
      type: file.type,
    };

    return combineLatest([
      this.http.put(S3AuthorizationToken.signedUrl, file, {
        headers: new HttpHeaders({
          'Content-Type': file.type,
        }),
        reportProgress: true,
        observe: 'events',
      }),
      of(futureFile),
    ]);
  }
}

В моем компоненте я хочу прослушивать обновления хода загрузки: 

private percentChange = new BehaviorSubject<number>(null);
percentChange$ = this.percentChange.asObservable();

onFileChange(event: Event) {
    console.log(event);
    const target = event.target as HTMLInputElement;
    const file: File = target.files[0];

    this.s3
      .getS3AuthorizationToken$()
      .pipe(
        switchMap((S3AuthorizationToken) =>
          this.s3.putFile$(S3AuthorizationToken, file)
        ),
        map(([event, futureFile]) => {
          if (event.type === HttpEventType.UploadProgress) {
            const percent = Math.round((event.loaded / event.total) * 100);
            console.log(`Uploading ${percent}%`);
            this.percentChange.next(percent);
          }
          if (event.type === HttpEventType.Response) {
            console.log(`Upload complete`);
            this.futureFile.next(futureFile);
          }
        })
      )
      .subscribe();
  }

Проблема, с которой я столкнулся это с this.percentChange.next() и this.futureFile.next()

Кажется, что не испускает никакого значения.

В моем шаблоне у меня есть: 

<input type="file" (change)="onFileChange($event)">

<div>{{ percentChange$ | async | json }} %</div>

Вы знаете, что может это вызвать?

1 Ответ

0 голосов
/ 13 июля 2020

Возможно, вам действительно придется напрямую отобразить наблюдаемый this.s3.putFile$(S3AuthorizationToken, file) вместо ответа, возвращаемого из switchMap. Попробуйте следующее 

onFileChange(event: Event) {
  console.log(event);
  const target = event.target as HTMLInputElement;
  const file: File = target.files[0];

  this.s3.getS3AuthorizationToken$().pipe(
    switchMap((S3AuthorizationToken) =>
      this.s3.putFile$(S3AuthorizationToken, file).pipe(
        map(([event, futureFile]) => {
          if (event.type === HttpEventType.UploadProgress) {
            const percent = Math.round((event.loaded / event.total) * 100);
            console.log(`Uploading ${percent}%`);
            this.percentChange.next(percent);
          } else if (event.type === HttpEventType.Response) {
            console.log(`Upload complete`);
            this.futureFile.next(futureFile);
          }
          return event;      // <-- return something for the `map` operator
        })
      )
    )
  )
  .subscribe();
}
...