FileReaderの結果を後で使用するために（グローバル）変数に割り当てる

Question

FileReader.readAsDataURLの結果を後で使用するために（グローバル）変数に割り当てる方法はありますか？

私はFileReader.resultがasycで動作し、reader.onload = function（）{...}で使用できることを知っていますが、後で使用するためにグローバルなvar（匿名コールバック内から）に割り当てることができませんでした。

私はgoogledとstackoverflowでもいくつかのヒントが見つかりましたが、本当に私を助けるものは何もありません。助言がありますか？

app.component.ts：

export class AppComponent { 

    postData: PostData; 

    image: File; 
    status: string; 
    imageBase64: string 

    constructor(private http: Http) { 
    this.imageBase64 = ''; 
    } 

    fileChangeEvent(fileInput: any) { 
    if (fileInput.target.files && fileInput.target.files[0]) { 
     let file = fileInput.target.files[0]; 
     let preview = document.querySelector('img') 

     let reader = new FileReader(); 

     this.image = file; 

     reader.onload = function (e: any) { 
     let b64 = e.target.result 

     // this.imageBase64 = b64; // undefinded here 

     preview.src = b64; 
     console.log(file); 
     console.log(b64); 
     } 

     reader.readAsDataURL(this.image); 
    } 
} 

    uploadimage() { 
    // do something later with the bae64 reader.result - after upload button pressed 
    } 

app.component.html：すべての

<label>Choose a file</label> 
<input type="file" class="inputfile" accept="image/*"(change)="fileChangeEvent($event)"> 
<img id="preview" src="" height="200" alt="Image preview..."> 
<button (click)="uploadimage()">Upload Image</button> 

Answer 1

まず、あなたが持っている間違ったthis

は、ここに私のコードです。 functionの内部では、メソッドとして呼び出された場合、関数が呼び出されたオブジェクトには、thisが動的にバインドされます。関数がメソッドとして呼び出されていない場合は、厳密モードでは（モジュールとクラス本体は暗黙的に厳密です）のthisがあり、そうでない場合はグローバルオブジェクトにデフォルト設定されます。

矢印機能(params) => expression or blockを使用してください。矢印関数は、静的にバインドthisをバインドします。すべての関数では、これ以外はすべて静的にバインドされています。矢印関数では、すべてが静的にバインドされています。

export class AppComponent { 
    fileChangeEvent(fileInput: HTMLInputElement) { 

    reader.onload = e => { 
     const b64 = e.target.result 
     this.imageBase64 = b64; 

     preview.src = b64; 

     console.log(file); 
     console.log(b64); 
     window.IMAGE_RESULT = b64; 
    }; 
    } 
} 


declare global { 
    interface Window { 
    IMAGE_RESULT?: string; 
    } 
}