Angular를 사용하여 웹 애플리케이션을 개발할 때 파일 업로드 기능은 중요한 요소입니다. 사용자가 파일을 선택하고 서버로 업로드하는 기능을 구현하는 방법에 대해 알아보겠습니다.

1. HTML 입력 요소 추가

파일을 선택할 수 있는 HTML 입력 요소를 추가합니다.

<input type="file" (change)="onFileSelected($event)" />

2. 컴포넌트에서 파일 선택 이벤트 핸들링

Angular 컴포넌트에서 선택된 파일을 처리하는 로직을 추가합니다.

onFileSelected(event) {
  this.selectedFile = <File>event.target.files[0];
}

3. 서버로 파일 업로드

선택된 파일을 서버에 업로드하는 메서드를 추가합니다. 이를 위해 HttpClient 모듈을 사용하여 POST 요청을 보냅니다.

uploadFile() {
  const formData = new FormData();
  formData.append('file', this.selectedFile, this.selectedFile.name);
  this.http.post('http://example.com/upload', formData)
    .subscribe(response => {
      console.log('File uploaded successfully', response);
    });
}

4. UI에 업로드 버튼 추가

사용자가 파일을 선택한 후 업로드할 수 있는 버튼을 추가합니다.

<button (click)="uploadFile()">Upload</button>

이제 Angular 애플리케이션에서 파일 업로드 기능을 구현했습니다.

위의 코드는 기본적인 파일 업로드 동작을 구현한 예시이며, 실제 프로젝트에서 보다 안전하고 유연한 파일 업로드를 위해서는 추가적인 보안 및 오류 처리 로직이 필요합니다.

더 많은 정보를 원하시면 Angular 공식 문서를 참고하시기 바랍니다.