Захват результата HTML5 FileReader при использовании обещаний в асинхронном режиме

promise.then - это асинхронная функция, что означает, что код появляется после того, как сначала будет выполнен этот оператор, а затем будет выполнена функция обратного вызова в then. Итак, вы должны переместить свой код в обратный вызов then.

promise.then((base64: string) => {
    console.info(base64);    // outputs string e.g 'data:image/jpeg;base64,........'
    console.info(typeof base64); // type is string
    image.src = base64;

    let editor = new PhotoEditorSDK.UI.ReactUI({
        container: this.editor.nativeElement
        editor: {
           image: image
        }
    });
});

Редактировать: Я изменил функцию обратного вызова на функцию толстой стрелки () => {}, потому что вы получаете доступ к одному из полей компонента с помощью this.editor, а function имеют свою собственную область действия. Вы можете получить сообщение об ошибке cannot read nativeElement of undefined.

Поскольку код по своей природе является асинхронный, вам придется дождаться результата, если вы хотите его использовать. В вашем случае вам придется подождите, пока ваше обещание будет выполнено. Итак, ваш код должен выглядеть так:

ngAfterViewInit(): void {
   let image = new Image();
   var promise = this.getBase64(this.fileObject, this.processImage);
   promise.then(function(base64: string) {
       console.info(base64);    
       image.src = base64;

       let editor = new PhotoEditorSDK.UI.ReactUI({
           container: this.editor.nativeElement
           editor: {
             image: image
           }
       });
   });
}

Я изменил следующее:

1. Я переместил код для создания экземпляра ReactUI в обратный вызов обещания
2. Указан тип параметра base64 как string
3. Исправлена ​​опечатка в вызове функции getBase64, от this.processImage() к this.processImage, поэтому он передает функцию обратного вызова, а не результат функции processImage.

Надеюсь, это поможет!

Поскольку getBase64 - это асинхронная операция, вы не можете сразу использовать ее результат. Вам нужно дождаться этого, либо позвонив в then (как вы уже экспериментировали), либо используя async/await.

Версия async/await (которая также является частью стандарта es 2017) проще для понимания, особенно если вы новичок в асинхронном программировании. Общее практическое правило: если вы видите Promise и вам нужно использовать значение, вам нужно будет использовать оператор await (и сделать свой метод асинхронным)

async ngAfterViewInit() {
    let image = new Image();
    var base64 = await this.getBase64(fileObject, this.processImage());

    image.src = base64; //Now available

    let editor = new PhotoEditorSDK.UI.ReactUI({
        container: this.editor.nativeElement
        editor: {
           image: image
        }
    });
}
public getBase64(file, onLoadCallback) {
    return new Promise<string>(function(resolve, reject) {
        var reader = new FileReader();
        reader.onload = function() { resolve(reader.result as string); };
        reader.onerror = reject;
        reader.readAsDataURL(file);
    });
}

Вы также можете переместить свой код в обратный вызов, переданный вызову then, но это может быть немного сложнее для чтения (особенно, если вы только начинаете с асинхронным кодом), и если вам нужно организовать несколько асинхронных операций, чтение кода быстро становится проблема

async ngAfterViewInit() {
    let image = new Image();
    this.getBase64(fileObject, this.processImage())
        .then(base64=>
        {
            image.src = base64; // available now 

            let editor = new PhotoEditorSDK.UI.ReactUI({
                container: this.editor.nativeElement
                editor: { image }
            });
        });
}