2017-05-01 2 views
0

해킹에 의해 해결 된 문제가 있으며이를 해결하는 더 나은 방법을 찾고 있습니다.이미지를 변경하는 더 좋은 방법 src async [angular 4]하는 동안?

사용자가 입력 : 파일을 클릭하고 파일을 업로드하지 않고 화면에 표시해야하는 이미지를 선택합니다 (FileReader 사용).

:

문제는 내가 Filereaders의 온로드 방법 내부의 거의 모든 것을 (나는 이미지를 변경 this.image에 도달해야) 슬프게도 나는

let el = <HTMLImageElement>document.querySelector(".veik"); 
el.src = this.result;` 

내 코드

HTML을 사용 도달 할 수있다

<input type="file" name="test" id="file" (change)="onChange($event)"> 

TS :

onChange($event){ 
    this.readThis($event); 
} 

ReadThis(inputValue: any) : void { 
    var file:File = inputValue.target.files[0]; 
    var myReader:FileReader = new FileReader(); 

    myReader.onload = function(e){ 
     let el = <HTMLImageElement>document.querySelector(".veik"); 
     el.src = this.result; 
    }; 

    myReader.readAsDataURL(file); 
} 
+0

이어서, 컴포넌트의 한 속성으로 화상의 소스를 결합하는'onload'에 해당 값을 설정하는 것 각도에서 수행하는 방법. –

답변

0

FileItem 형식을 사용하여 임시 파일에 액세스하려고 시도 할 수 있습니다

예 : [1]. 같은 일반적인 FileItem 클래스 : (inputValue의 : FileItem) : 당신의 (모든 inputValue의) 변경,

[2]와 같이 업로드 된 파일에 대한 액세스를 얻을 일정한 만들기 : CONST 파일 : 파일 = 항목을 선택합니다.

_file 지금 당신은 할 수 file.name, file.size 등

희망 같은 것들을 액세스 할 수 있습니다.

건배