Проход по файлам для загрузки не работает - PullRequest
1 голос
/ 01 ноября 2019

Я пытаюсь создать (мульти) загрузку файла в Angular. Я хочу, чтобы пользователь выбрал один или несколько файлов, вызвал мой бэкэнд для получения подписей общего доступа для хранилища BLOB-объектов Azure, а затем загрузил файлы из клиента в хранилище Azure.

Моя проблема заключается в том, что после выбора файлаЯ хочу пройтись по выбранным файлам и запустить процесс загрузки для каждого файла.

onFileChange(event: any): void {
  this.filesSelected = true;
  this.uploadProgress$ = from(event.target.files as FileList).pipe(
    map(file => this.uploadFile(file)),
    combineAll()
  );
}

Я нашел приведенный выше код в приведенном ниже примере: https://medium.com/@stuarttottle/upload-to-azure-blob-storage-with-angular-7977e979496a, и это кажется хорошим решением. Я подправил код, чтобы получить SAS для каждого файла и оставить все как есть. Моя проблема в том, что карта не файл. Неважно, если я выберу один или несколько файлов. Отладка показывает, что выбранные файлы действительно прибывают (event.target.files на самом деле представляет собой FileList с выбранными файлами), но оператор map просто не запускается. Пересматривая код, я не могу найти проблему. Может быть, вы, ребята, можете помочь;)

[править] Добавлен запрос загрузки файла в комментариях

uploadFile(file: File): Observable<IUploadProgress> {
  return this.picturesService.acquireSas(file.name).pipe(
    flatMap(sas => {
      const accessToken: ISasToken = {
        container: sas.containerName,
        filename: file.name,
        storageAccessToken: sas.valetKeySecret,
        storageUri: sas.storageUrl
      };
      return this.blobStorage
        .uploadToBlobStorage(accessToken, file)
        .pipe(map(progress => this.mapProgress(file, progress)));
    })
  );
}

[/ edit]

Ответы [ 2 ]

1 голос
/ 02 ноября 2019

Все, что вы сделали, просто отлично. Вам просто нужно подписаться на наблюдаемое.

Как this.uploadProgress$.subscribe();

Рабочий пример здесь .

Вы можете узнать о rxjs @ learnrxjs.io

1 голос
/ 01 ноября 2019

А как насчет отображения через массив вместо:

this.arrayOfUploadProgress = [...event.target.files]
  .map(file => this.uploadFile(file));
forkJoin(this.arrayOfUploadProgress).subscribe(response => console.log(response));
...