Datei hochladen in Angular
- Importieren von Bibliotheken in Angular
- Exportieren von Komponenten und Deklarieren von Variablen in Angular
-
Verwenden von
basicUpload()
zum Hochladen mehrerer Dateien in Angular -
Mit
basicUploadSingle()
eine einzelne Datei in Angular hochladen -
Verwenden von
uploadAndProgress()
zum Hochladen mehrerer Dateien in Angular -
Verwenden von
UploadAndProgressSingle()
zum Hochladen einer einzelnen Datei in Angular - Aufruf der Upload-Funktion in Angular
- Zusammenfassung
![Datei hochladen in Angular](/img/Angular/angular-feature-image.webp)
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:
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn