각도 2 파일 업로드 샘플

Question

각도 2를 사용할 때 이러한 기능의 기본을 설명하는 간단한 파일 업로드 샘플을 공유 할 수 있습니까?

내가 연구 한 것은 Angular의 이전 버전을 버블 링합니다. 이 시점에서 내가하려는 것은 작은 이미지 파일을 속성이나 로컬 저장소에로드하고 웹 페이지에 표시하는 것입니다.

HttpClient의 사용을 암시한다고 생각하지만 Angular 2를 처음 사용하는 사람이라면 단순한 샘플에 기대지 않고 작동하는 방법의 시작을 어렵게 만드는 것이 좋습니다.

나는 이것을 시도하고 있는데 기대했던 효과가 없다. 내가 수입을 잃어버린 것 같아. 이 부분은 렌더링 된 이미지가 아니라 파일의 이름 만 가져 오려고합니다. [(ngModel)]은 옵션이 아니므로, 선택한 파일을 가져 오기 위해 이벤트를 변경해야합니다.

구성 요소

@Component({ 
    selector:'home-page' 
    ,templateUrl:'./home.page.html' 
}) 
export class HomePageComponent{ 
    CurrentFile:File; 
    public FileChangeEvent(fileInput:any){ 
     this.CurrentFile = fileInput.target.files[0]; 
    } 
} 

HTML

<div> 
    <input type="file" (change)="FileChangeEvent($event)"> 
    <div *ngIf="CurrentFile"> 
     <p>{{CurrentFile.name}}</p> 
    </div> 
</div> 

Answer 1

그것의 거친 후 나는 맨손으로 간주 될 수 있다고 생각하는 것을 얻었다. 이미지가 선택되지 않은 경우, 페이지가로드되고 파일을 알 수없는 경우를 제외하고는 처리 할 수 ​​없습니다.

구성 요소

@Component({ 
    selector:'home-page' 
    ,templateUrl:'./home.page.html' 
}) 
export class HomePageComponent{ 
    CurrentFile:File; 
    ImageSource:string; 

    public FileChangeEvent(fileInput:any){ 
     this.CurrentFile = fileInput.target.files[0]; 

     let reader = new FileReader(); 
     reader.onload =() => { 
       this.ImageSource = reader.result; 
      }; 
     reader.readAsDataURL(this.CurrentFile); 
    } 
} 

당신은 당신의 서버에 파일을 업로드이 답변을 사용할 수 있습니다

<div> 
    <input type="file" (change)="FileChangeEvent($event)"> 
    <div *ngIf="CurrentFile"> 
     <img [src]="ImageSource"> 
    </div> 
</div> 

Answer 2

당신이 코너 2에 파일을 업로드가 필요한 모든 :

https://github.com/valor-software/ng2-file-upload

Answer 3

HTML :

https://stackoverflow.com/a/40216616/5413117

예를 들어 그것을 하늘색에 업로드하고 하늘색 저장소 링크를 통해 이미지를 표시 할 수 있습니다.

하면, 파일 변경 이벤트를 사용하여 작동하지만, 당신이 파일 입력에 대한 제어 값 접근을 작성할 수 있습니다 제거하려면

, 여기에 설명 : 각도 drmssst

https://stackoverflow.com/a/41938495/5413117