Захват результата HTML5 FileReader в переменную с помощью обещаний - PullRequest
Новая
       30

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

0 голосов
/ 15 ноября 2018

У меня есть приложение Angular 4, где я читаю изображение и пытаюсь передать строку base64 в другую переменную - однако у меня возникла проблема из-за асинхронной природы этого - image.src пусто и, следовательно, значение правильно передал объект изображения? 

ngAfterViewInit(): void {
    let image = new Image();
    var promise = this.getBase64(fileObject, this.processImage());
    promise.then(function(base64) {
        console.log(base64);    // outputs string e.g 'data:image/jpeg;base64,........'
    });

    image.src = base64; // how to get base64 string into image.src var here??          
}

/**
 * get base64 string from supplied file object
 */
public getBase64(file, onLoadCallback) {
    return new Promise(function(resolve, reject) {
        var reader = new FileReader();
        reader.onload = function() { resolve(reader.result); };
        reader.onerror = reject;
        reader.readAsDataURL(file);
    });
}

public processImage() {

}

1 Ответ

0 голосов
/ 15 ноября 2018

Проблема, которую вы получили: base64, является переменной, область действия в функции обратного вызова .then(). Чтобы сделать это правильно, просто сделайте это: 

ngAfterViewInit(): void {
    let image = new Image();
    var promise = this.getBase64(fileObject, this.processImage());
    promise.then(function(base64) {    // base64 variable is scoped to this function only.
        console.log(base64);    // outputs string e.g 'data:image/jpeg;base64,........'

        image.src = base64;
    });
}
...