파일 업로드는 웹 애플리케이션에서 자주 사용되는 기능 중 하나입니다. Angular 프레임워크를 사용하면 간단하게 파일 업로드를 구성할 수 있습니다. Angular 파일 업로드 구성에 대해 알아봅시다.

1. HTML 파일 준비

먼저, 파일을 업로드할 form 요소를 작성합니다. 아래는 기본적인 파일 업로드 폼의 예시입니다.

<form>
  <input type="file" (change)="onFileSelected($event)" accept="image/*">
  <button (click)="onUpload()">Upload</button>
</form>

위 예제에서 (change) 이벤트는 파일을 선택했을 때, (click) 이벤트는 업로드 버튼을 눌렀을 때를 감지합니다.

2. Angular 컴포넌트 작성

그 다음으로, 파일 업로드를 처리할 Angular 컴포넌트를 작성합니다. 아래는 간단한 파일 업로드 컴포넌트의 예시입니다.

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent {
  selectedFile: File = null;

  constructor(private http: HttpClient) {}

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

  onUpload() {
    const fd = new FormData();
    fd.append('file', this.selectedFile, this.selectedFile.name);
    this.http.post('https://example.com/upload', fd)
      .subscribe(res => {
        console.log(res);
      });
  }
}

위 코드에서 onFileSelected 메서드는 파일 선택 시 호출되며, onUpload 메서드는 파일을 서버로 업로드합니다.

3. 파일 업로드 서버 측 구현

마지막으로, 파일을 실제로 업로드할 서버 측 로직을 구현해야 합니다. 이 부분은 서버 측 기술에 따라 다를 수 있습니다. 예를 들어, Node.js에서 Express를 사용하여 파일을 업로드할 때는 multer와 같은 미들웨어를 사용할 수 있습니다.

이제 위 세 가지 단계를 통해 Angular에서 파일 업로드를 구성하는 방법에 대해 알아보았습니다. 각 환경 및 요구 사항에 따라 파일 업로드 구성이 달라질 수 있으므로 사용 사례에 따라 적합한 방법을 선택해야 합니다.

더 자세한 내용은 Angular 공식 문서를 참고하세요.