Я пытаюсь создать (мульти) загрузку файла в 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]