Загрузка нескольких файлов в Angular

Question

Я пытаюсь загрузить несколько файлов и вернуть их строковое представление base64 в пользовательском компоненте в приложении Angular.

Проблема в том, что приведенный ниже код не работает для нескольких файлов, потому что я неправильно понимают замыкания javascript, и l oop заканчивает работу перед тем, как читатель читает файлы. Это означает, что если я загружаю 4 файла, строка файла пуста для первых 3 из-за этой строки:

  this.selectedFiles[this.selectedFiles.length - 1].file = btoa(binaryString);

В другом месте я видел, как можно обойти это, изменив переменную чтобы позволить, но это не помогло мне. Я думаю , что мне нужно сделать, чтобы обернуть чтение в обещание (?), Чтобы l oop продолжался только после его завершения? Я не знаю, как это сделать

uploadFile(files) {

  if (files) {
    for (let i = 0; i < files.length; i++) {
      var extension = files[i].name.split('.').pop();
      this.selectedFiles.push({
        name: files[i].name,
        size: files[i].size,
        file: '',
        extension: (extension === files[i].name) ? '' : extension
      })

      var reader = new FileReader();
      reader.onload = this.handleReaderLoaded.bind(this);
      reader.readAsBinaryString(files[i]);
    }
  }
}

handleReaderLoaded(readerEvt) {
  var binaryString = readerEvt.target.result;
  this.selectedFiles[this.selectedFiles.length - 1].file = btoa(binaryString);
  this.outputtedFiles.emit(this.selectedFiles);
}