将FileReader结果分配给（全局）变量供以后使用

Question

如何将FileReader.readAsDataURL结果分配给（全局）变量以备后用？

我知道FileReader.result的工作原理asyc并可以在reader.onload = function（）{...}中使用但我无法将它分配给全局变量（从匿名回调中）供以后使用。

我google了一下，发现了一些提示也在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为undefined严格模式（模块和类体隐含严格），否则它默认为全局对象。

使用箭头功能(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; 
    } 
}