Angular로 이미지 업로드

1. Angular로 이미지 업로드
2. Angular에서 구성 요소 내보내기 및 변수 선언
3. Angular의 여러 이미지에 대한 기본 업로드
4. Angular의 단일 이미지에 대한 기본 업로드
5. Angular의 여러 이미지에 대한 업로드 및 진행률
6. Angular의 단일 이미지 업로드 및 진행
7. Angular에서 업로드 함수 호출하기

이 문서에서는 다음을 소개합니다.

1. Angular를 사용하여 4가지 스타일의 이미지를 업로드합니다.
2. 이미지가 업로드될 때 진행률 표시줄을 표시합니다.
3. 업로드가 완료되면 이미지 업로드 완료 메시지를 표시합니다.

Angular로 이미지 업로드

이미지는 모든 웹 응용 프로그램의 기본 부분이며 모든 웹 사이트에는 이미지가 있습니다. 이 튜토리얼에서는 다양한 방법으로 Angular에서 이미지를 업로드하는 방법을 배웁니다.

아래 명령어를 사용하여 새로운 애플리케이션을 만들어 봅시다.

# angular
ng new my-app

Angular에서 새 애플리케이션을 만든 후 이 명령을 사용하여 애플리케이션 디렉토리로 이동합니다.

# angular
cd my-app

이제 앱을 실행하여 모든 종속 항목이 올바르게 설치되었는지 확인하겠습니다.

# angular
ng serve --open

라이브러리를 가져오고 파일 업로더에 대한 구성 요소를 설정합니다.

# angular
import { Component, VERSION } from '@angular/core';
import {HttpClientModule, HttpClient, HttpRequest, HttpResponse, HttpEventType} from '@angular/common/http';

@Component({
  selector: 'my-app',
  template: `
    <input type="file" accept=".jpg,.png" class="button" (change)="upload($event.target.files)" />
    <p>Upload Percent: {{percentDone}}% </p> <br />

    <ng-container *ngIf="uploadSuccess" class="success">
      <p class="sucess">Upload Successful</p>
    </ng-container>
  `,
  styleUrls: ['./app.component.css'],
})

Angular에서 구성 요소 내보내기 및 변수 선언

AppComponent를 내보내고 percentDone 변수를 number로 선언하고 UploadSuccess를 boolean으로 선언합니다. 또한 HttpClient를 호출하는 생성자를 선언합니다.

# angular
export class AppComponent {
  percentDone: number;
  uploadSuccess: boolean;

  constructor(private http: HttpClient) {}

Angular의 여러 이미지에 대한 기본 업로드

Angular에는 4가지 다른 스타일의 이미지 업로드가 있습니다. 여러 이미지의 기본 업로드는 그 중 하나입니다. 이미지의 진행률 표시줄을 표시하지 않고 이 스타일로 여러 이미지를 업로드할 수 있습니다.

basicUploadImage(files: File[]) {
    var formData = new FormData();
    Array.from(files).forEach((f) => formData.append('file', f));
    this.http.post('https://file.io', formData).subscribe((event) => {
      console.log('done');
    });
  }

백엔드 서버 URL로 변경할 수 있는 https://file.io로 업로드 요청을 보내고 있습니다. 백엔드 서버는 업로드된 이미지 데이터를 수신하고 업로드된 파일에 대한 URL을 보냅니다.

Angular의 단일 이미지에 대한 기본 업로드

Angular에서 이미지를 업로드하는 두 번째 스타일은 이미지 파일에 대한 기본 업로드입니다. 이 스타일에서 사용자는 한 번에 하나의 이미지만 업로드할 수 있습니다.

이 스타일은 또한 이미지가 업로드되는 동안 진행 상황을 표시하지 않습니다.

basicUploadSingleImage(file: File) {
    this.http.post('https://file.io', file).subscribe((event) => {
      console.log('done');
    });
  }

Angular의 여러 이미지에 대한 업로드 및 진행률

Angular에서 이미지를 업로드하는 세 번째 스타일은 여러 이미지에 대해 진행률이 있는 업로드입니다. 사용자는 이 스타일로 업로드된 비율을 표시하는 진행률 표시줄을 사용하여 여러 이미지를 업로드할 수 있습니다.

uploadImageAndProgress(files: File[]) {
    console.log(files);
    var formData = new FormData();
    Array.from(files).forEach((f) => formData.append('file', f));

    this.http.post('https://file.io', formData, {
        reportProgress: true,
        observe: 'events',
      })
      .subscribe((event) => {
        if (event.type === HttpEventType.UploadProgress) {
          this.percentDone = Math.round((100 * event.loaded) / event.total);
        } else if (event instanceof HttpResponse) {
          this.uploadSuccess = true;
        }
      });
  }

Angular의 단일 이미지 업로드 및 진행

Angular에서 이미지를 업로드하는 네 번째 스타일은 진행률 표시줄이 있는 단일 이미지입니다. 사용자는 이 스타일로 업로드된 비율을 표시하는 진행률 표시줄이 있는 단일 이미지를 업로드할 수 있습니다.

uploadAndProgressSingleImage(file: File) {
    this.http
      .post('https://file.io', file, {
        reportProgress: true,
        observe: 'events',
      })
      .subscribe((event) => {
        if (event.type === HttpEventType.UploadProgress) {
          this.percentDone = Math.round((100 * event.loaded) / event.total);
        } else if (event instanceof HttpResponse) {
          this.uploadSuccess = true;
        }
      });
  }

Angular에서 업로드 함수 호출하기

Angular에 4개의 업로드 기능을 추가했습니다. 원하는 스타일로 업로드 기능을 호출할 수 있습니다.

uploadImage(files: File[]) {
    this.uploadImageAndProgress(files);
  }

출력:

요약

Angular에서 4가지 다른 스타일의 이미지 업로드와 upload 기능에서 이를 호출하는 방법에 대해 논의했습니다. 전체 코드는 아래에 나와 있습니다.

import { Component, VERSION } from '@angular/core';
import {
  HttpClientModule,
  HttpClient,
  HttpRequest,
  HttpResponse,
  HttpEventType,
} from '@angular/common/http';

@Component({
  selector: 'my-app',
  template: `
    <input type="file" accept=".jpg,.png" class="button" (change)="uploadImage($event.target.files)" />
    <p>Upload Percent: {{percentDone}}% </p> <br />

    <ng-container *ngIf="uploadSuccess" class="success">
      <p class="sucess">Upload Successful</p>
    </ng-container>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  percentDone: number;
  uploadSuccess: boolean;

  constructor(private http: HttpClient) {}

  uploadImage(files: File[]) {
    this.uploadImageAndProgress(files);
  }

  basicUploadImage(files: File[]) {
    var formData = new FormData();
    Array.from(files).forEach((f) => formData.append('file', f));
    this.http.post('https://file.io', formData).subscribe((event) => {
      console.log('done');
    });
  }

  basicUploadSingleImage(file: File) {
    this.http.post('https://file.io', file).subscribe((event) => {
      console.log('done');
    });
  }

  uploadImageAndProgress(files: File[]) {
    console.log(files);
    var formData = new FormData();
    Array.from(files).forEach((f) => formData.append('file', f));

    this.http.post('https://file.io', formData, {
        reportProgress: true,
        observe: 'events',
      })
      .subscribe((event) => {
        if (event.type === HttpEventType.UploadProgress) {
          this.percentDone = Math.round((100 * event.loaded) / event.total);
        } else if (event instanceof HttpResponse) {
          this.uploadSuccess = true;
        }
      });
  }

  uploadAndProgressSingleImage(file: File) {
    this.http
      .post('https://file.io', file, {
        reportProgress: true,
        observe: 'events',
      })
      .subscribe((event) => {
        if (event.type === HttpEventType.UploadProgress) {
          this.percentDone = Math.round((100 * event.loaded) / event.total);
        } else if (event instanceof HttpResponse) {
          this.uploadSuccess = true;
        }
      });
  }
}

여기 데모