Datei hochladen in Angular

1. Importieren von Bibliotheken in Angular
2. Exportieren von Komponenten und Deklarieren von Variablen in Angular
3. Verwenden von basicUpload() zum Hochladen mehrerer Dateien in Angular
4. Mit basicUploadSingle() eine einzelne Datei in Angular hochladen
5. Verwenden von uploadAndProgress() zum Hochladen mehrerer Dateien in Angular
6. Verwenden von UploadAndProgressSingle() zum Hochladen einer einzelnen Datei in Angular
7. Aufruf der Upload-Funktion in Angular
8. Zusammenfassung

Wir stellen Ihnen vor, wie Sie mit Angular eine Datei in vier verschiedenen Stilen hochladen.

Wir werden auch vorstellen, wie Sie den Fortschrittsbalken anzeigen, wenn die Datei hochgeladen wird, und wie Sie Nachrichten zum Abschluss des Datei-Uploads anzeigen, wenn der Upload abgeschlossen ist.

Importieren von Bibliotheken in Angular

Zunächst importieren wir Bibliotheken und legen Komponenten für den Datei-Uploader fest.

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

@Component({
  selector: 'my-app',
  template: `
    Version = {{version.full}} <br/>
    <input type="file" (change)="upload($event.target.files)" />
    Upload Percent: {{percentDone}}% <br />
    
    <ng-container *ngIf="uploadSuccess">
      Upload Successful
    </ng-container> 
  `,
})

Exportieren von Komponenten und Deklarieren von Variablen in Angular

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

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

  constructor(
    private http: HttpClient,
    ) { }
    
  version = VERSION

Verwenden von basicUpload() zum Hochladen mehrerer Dateien in Angular

Es gibt vier verschiedene Arten des Datei-Uploads in Angular, und der basicUpload() für mehrere Dateien ist einer davon. In diesem Stil können mehrere Dateien gleichzeitig hochgeladen werden, ohne dass ein Fortschrittsbalken für Dateien angezeigt wird.

basicUpload(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, die mit der backend server URL geändert werden können. Der Backend-Server empfängt Upload-Daten von Dateien, die eine URL an die hochgeladene Datei senden.

Mit basicUploadSingle() eine einzelne Datei in Angular hochladen

Der zweite Stil zum Hochladen von Dateien in Angular ist basicUploadSingle() für eine einzelne Datei. Bei diesem Stil kann der Benutzer jeweils nur eine Datei hochladen. Dieser Stil zeigt auch während des Hochladens von Dateien keinen Fortschritt an.

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

Verwenden von uploadAndProgress() zum Hochladen mehrerer Dateien in Angular

Der dritte Stil zum Hochladen von Dateien in Angular ist uploadAndProgress() für mehrere Dateien. Der Benutzer kann in diesem Stil mehrere Dateien gleichzeitig hochladen, wobei ein Fortschrittsbalken den Prozentsatz der hochgeladenen Dateien anzeigt.

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

Verwenden von UploadAndProgressSingle() zum Hochladen einer einzelnen Datei in Angular

Der vierte Stil zum Hochladen von Dateien in Angular ist uploadAndProgressSingle() für eine einzelne Datei. Auf diese Weise kann der Benutzer gleichzeitig eine einzelne Datei hochladen, wobei ein Fortschrittsbalken den Prozentsatz der hochgeladenen Dateien anzeigt.

uploadAndProgressSingle(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

Nachdem wir nun vier Stile von Upload-Funktionen in angle hinzugefügt haben, können wir unsere Upload-Funktion mit dem gewünschten Stil aufrufen.

upload(files: File[]){
    //pick from one of the 4 styles of file uploads below
    this.uploadAndProgress(files);
  }

Ausgabe:

Zusammenfassung

Wir haben vier verschiedene Arten des Datei-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: `
    Version = {{version.full}} <br/>
    <input type="file" (change)="upload($event.target.files)" />
    Upload Percent: {{percentDone}}% <br />
    
    <ng-container *ngIf="uploadSuccess">
      Upload Successful
    </ng-container> 
  `,
})
export class AppComponent {
  percentDone: number;
  uploadSuccess: boolean;

  constructor(
    private http: HttpClient,
    ) { }
    
  version = VERSION
  
  upload(files: File[]){
    this.uploadAndProgress(files);
  }

  basicUpload(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')
      })
  }

  basicUploadSingle(file: File){
    this.http.post('https://file.io', file)
      .subscribe(event => {
        console.log('done')
      })
  }
  
  uploadAndProgress(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;
        }
    });
  }
  
  uploadAndProgressSingle(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;
        }
    });
  }
}

Ausgabe: