Загрузите несколько изображений в angular и Firebase проект, он не работает в последовательности

Question

  async onSubmit(formValue) {
    this.isSubmitted = true;
    if(this.selectedImageArray.length > 0) {  // 4 images in this array
      for (let index = 0; index < this.selectedImageArray.length; index++) {  // Loop through this image array
          await new Promise(resolve => {
              setTimeout(()=> {
                  console.log('This is iteration ' + index); 
                  var filePath = `images/tours/${this.selectedImageArray[index].name.split('.').slice(0,-1).join('.')}_${new Date().  getTime()}`;
                  const fileRef = this.storage.ref(filePath);
                  this.storage.upload(filePath, this.selectedImageArray[index]).snapshotChanges().pipe(
                    finalize(() => {
                      fileRef.getDownloadURL().subscribe((url) => {
                        formValue[`imageUrl${index+1}`] = url;
                        console.log(url);
                      });
                    })  
                  ).subscribe()
                  resolve();
              }, 3000);
          });
      }
      console.log('After loop execution');
      // this.value(formValue);
    }
  }

После отправки кода он загрузит и распечатает 3 URL-адреса, затем напечатает «после l oop выполнения», затем напечатает 4-й, я не понимаю, почему. См. Здесь в консоли

см. В строке изображения номер выполнения кода. Что я хочу, чтобы выполнить код в последовательности после загрузки всех изображений, то после того, как он будет go из l oop.

Answer 1

Я написал новую функцию для загрузки нескольких файлов

public multipleFileUpload(event, isEncodeNeeded?: Boolean):Array<any> {
        if(!isEncodeNeeded){
            isEncodeNeeded=false;
        }
        let fileList = [];
        for (let index = 0; index < event.target.files.length; index++) {
            let returnData = {};
            let file: File = event.target.files[index];
            let myReader: FileReader = new FileReader();
            returnData['documentName'] = event.target.files[index]['name'];
            returnData['documentType'] = event.target.files[index]['type'];
            myReader.addEventListener("load", function (e) {
                if (myReader.readyState == 2) {
                    returnData['document'] = isEncodeNeeded ? btoa(e.target['result']) : e.target['result'];
                }
            });
            myReader.readAsBinaryString(file);
            fileList.push(returnData);
        }
        return fileList;
    }

В этой функции событие является событием ввода, а isEncodeNeeded - преобразование, которое необходимо. Если это правда, то он конвертируется в формат base64. Выходной формат

[{
        "document": documentbyte,
        "documentName": document name,
        "documentType": file format
    }]

Answer 2

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

1. Сначала мы создадим массив всех наблюдаемых снимков загрузки хранилища.
2. Мы используем concat () чтобы запустить их все по порядку. (Если вы переключитесь с concat () на merge (), все они будут go сразу)
3. Мы используем mergeMap, чтобы перейти к getDownloadURL
4. Затем в подписке мы добавляем URL-адрес для formValues ​​

5. Наконец, в финализаторе мы устанавливаем свойство value "value", равное formValue.

   onSubmit(formValue) {
   
     const snapshotObservables = this.selectedImageArray.map(selectedImage => {  // 4 images in this array
       const filePath = `images/tours/${selectedImage.name.split('.').slice(0, -1).join('.')}_${new Date().  getTime()}`;
       return combineLatest(this.storage.upload(filePath, selectedImage).snapshotChanges(), filePath);
     });
   
     concat(...snapshotObservables).pipe(
       mergeMap(([snapshot, filePath]) => {
         const fileRef = this.storage.ref(filePath);
         return fileRef.getDownloadURL();
       }),
       finalize(() => {
         this.value(formValue);
       })
     ).subscribe(url => {
       formValue[`imageUrl${index+1}`] = url;
     });
   
   }