FileReader 결과를 나중에 사용할 수 있도록 전역 변수에 할당하십시오.

Question

나중에 사용할 수 있도록 FileReader.readAsDataURL 결과를 (전역) 변수에 어떻게 할당합니까?

FileReader.result가 asyc를 사용하며 reader.onload = function() {...}에서 사용할 수 있음을 알고 있지만 나중에 익명 콜백 내부의 전역 var에 할당 할 수 없었습니다. .

내가 봤 거든 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이 메서드로 호출되면 해당 함수가 호출 된 개체에 동적으로 바인딩됩니다. 함수가 메서드로 호출되지 않으면 strict 모드에서 (모듈 및 클래스 본문이 암시 적으로 엄격 함) 인 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; 
    } 
}