Bild hochladen in Angular

1. Hochladen eines Bildes in Angular
2. Exportieren Sie Komponenten und deklarieren Sie Variablen in Angular
3. Einfacher Upload für mehrere Bilder in Angular
4. Einfacher Upload für ein einzelnes Bild in Angular
5. Hochladen und Fortschritt für mehrere Bilder in Angular
6. Hochladen und Fortschritt für ein einzelnes Bild in Angular
7. Aufruf der Upload-Funktion in Angular

Dieser Artikel stellt Folgendes vor:

1. Laden Sie mit Angular ein Bild in vier verschiedenen Stilen hoch.
2. Zeigen Sie den Fortschrittsbalken an, wenn das Bild hochgeladen wird.
3. Zeigen Sie eine Abschlussmeldung für das Hochladen des Bildes an, wenn der Upload abgeschlossen ist.

Hochladen eines Bildes in Angular

Bilder sind ein grundlegender Bestandteil jeder Webanwendung, und jede Website hat Bilder. In diesem Tutorial lernen wir, wie man ein Bild auf verschiedene Arten in Angular hochlädt.

Lassen Sie uns mit dem folgenden Befehl eine neue Anwendung erstellen.

# angular
ng new my-app

Nachdem wir unsere neue Anwendung in Angular erstellt haben, gehen wir mit diesem Befehl zu unserem Anwendungsverzeichnis.

# angular
cd my-app

Lassen Sie uns nun unsere App ausführen, um zu überprüfen, ob alle Abhängigkeiten korrekt installiert sind.

# angular
ng serve --open

Wir werden Bibliotheken importieren und Komponenten für den Datei-Uploader festlegen.

# 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'],
})

Exportieren Sie Komponenten und deklarieren Sie Variablen in Angular

Wir exportieren unsere AppComponent und deklarieren die Variablen percentDone als number und UploadSuccess als boolean. Wir werden auch einen Konstruktor deklarieren, der HttpClient aufruft.

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

  constructor(private http: HttpClient) {}

Einfacher Upload für mehrere Bilder in Angular

Es gibt 4 verschiedene Arten des Bilduploads in Angular; Der einfache Upload mehrerer Bilder ist einer davon. In diesem Stil können mehrere Bilder hochgeladen werden, ohne dass ein Fortschrittsbalken für Bilder angezeigt wird.

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');
    });
  }

Wir senden Upload-Anfragen an https://file.io, was mit der Backend-Server-URL geändert werden kann. Der Backend-Server empfängt die hochgeladenen Bilddaten, die eine URL an die hochgeladene Datei senden.

Einfacher Upload für ein einzelnes Bild in Angular

Der zweite Stil zum Hochladen von Bildern in Angular ist das einfache Hochladen einer Bilddatei. Bei diesem Stil kann der Benutzer jeweils nur ein Bild hochladen.

Dieser Stil zeigt auch keinen Fortschritt an, während Bilder hochgeladen werden.

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

Hochladen und Fortschritt für mehrere Bilder in Angular

Der dritte Stil zum Hochladen von Bildern in Angular ist das Hochladen mit Fortschritt für mehrere Bilder. Der Benutzer kann mehrere Bilder mit einem Fortschrittsbalken hochladen, der den in diesem Stil hochgeladenen Prozentsatz anzeigt.

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;
        }
      });
  }

Hochladen und Fortschritt für ein einzelnes Bild in Angular

Der vierte Stil zum Hochladen von Bildern in Angular ist ein einzelnes Bild mit einem Fortschrittsbalken. Der Benutzer kann ein einzelnes Bild mit einem Fortschrittsbalken hochladen, der den in diesem Stil hochgeladenen Prozentsatz anzeigt.

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;
        }
      });
  }

Aufruf der Upload-Funktion in Angular

Wir haben vier Upload-Funktionen in Angular hinzugefügt; können wir unsere Upload-Funktion mit dem gewünschten Style aufrufen.

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

Ausgabe:

Zusammenfassung

Wir haben vier verschiedene Arten des Bild-Uploads in Angular besprochen und wie wir sie in unserer upload-Funktion aufrufen können. Der vollständige Code ist unten angegeben.

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;
        }
      });
  }
}

Demo hier