So vereinfachen Sie das Hochladen von Bildern mit Angular

Dies ist der zweite Teil des Tutorials zum Hochladen eines Bildes auf Amazon S3. Den ersten Teil finden Sie hier. In diesem Artikel werden wir uns den Winkelteil ansehen.

Sie können sich auch mein schrittweises Video-Tutorial eines Bild-Uploads ansehen. Der Link befindet sich am Ende dieses Artikels.

1. Erstellen Sie zuerst eine Vorlage

Zunächst möchten wir eine wiederverwendbare Komponente erstellen, die sich problemlos in andere Komponenten einstecken lässt.

Beginnen wir mit einer einfachen HTML-Vorlage für unsere Eingabe. Vergessen Sie nicht, Stile Ihrer Wahl anzuwenden, oder Sie können sie von meinem GitHub-Repo erhalten.

 Select Image  

Wichtig ist hier eine Art von Eingabe, die auf eine Datei festgelegt ist. Das Accept- Attribut definiert akzeptierte Dateien für die Eingabe. Bild / * gibt an, dass wir durch diese Eingabe Bilder eines beliebigen Typs auswählen können. #imageInput ist eine Referenz der Eingabe, über die wir auf hochgeladene Dateien zugreifen können.

Ein Änderungsereignis wird ausgelöst, wenn wir eine Datei auswählen. Schauen wir uns also den Klassencode an.

2. Vergessen Sie nicht den Komponentencode

class ImageSnippet { constructor(public src: string, public file: File) {} } @Component({ selector: 'bwm-image-upload', templateUrl: 'image-upload.component.html', styleUrls: ['image-upload.component.scss'] }) export class ImageUploadComponent { selectedFile: ImageSnippet; constructor(private imageService: ImageService){} processFile(imageInput: any) { const file: File = imageInput.files[0]; const reader = new FileReader(); reader.addEventListener('load', (event: any) => { this.selectedFile = new ImageSnippet(event.target.result, file); this.imageService.uploadImage(this.selectedFile.file).subscribe( (res) => { }, (err) => { }) }); reader.readAsDataURL(file); } }

Lassen Sie uns diesen Code aufschlüsseln. Sie können in der sehen process dassWir erhalten eine Bildeingabe, die wir vom Änderungsereignis gesendet haben . Durch Schreiben von imageInput.files [0] greifen wir auf die erste Datei zu . Wir benötigen einen Reader, um auf zusätzliche Eigenschaften einer Datei zugreifen zu können. Durch Aufrufen von readAsDataURL können wir eine base64-Darstellung eines Bildes in der Rückruffunktion des zuvor abonnierten addEventListener erhalten .

In einer Rückruffunktion erstellen wir eine Instanz des ImageSnippet. Der erste Wert ist eine base64-Darstellung eines Bildes, das später auf dem Bildschirm angezeigt wird. Der zweite Wert ist eine Datei selbst, die wir zum Hochladen auf Amazon S3 an den Server senden.

Jetzt müssen wir nur noch diese Datei bereitstellen und eine Anfrage über einen Dienst senden.

3. Wir brauchen auch einen Service

Ohne Service wäre es keine Angular-App. Der Dienst ist für das Senden einer Anfrage an unseren Knotenserver verantwortlich.

export class ImageService { constructor(private http: Http) {} public uploadImage(image: File): Observable { const formData = new FormData(); formData.append('image', image); return this.http.post('/api/v1/image-upload', formData); } }

Wie ich Ihnen in der vorherigen Vorlesung gesagt habe, müssen wir ein Bild als Teil der Formulardaten senden . Wir werden das Bild unter dem Schlüssel eines Bildes anhängen , um Daten zu bilden (derselbe Schlüssel, den wir zuvor in Node konfiguriert haben). Schließlich müssen wir nur noch eine Anfrage mit formData in einer Nutzlast an den Server senden .

Jetzt können wir feiern. Das ist es! Bild zum Hochladen gesendet!

In den nächsten Zeilen werde ich zusätzlichen Code für eine bessere Benutzererfahrung bereitstellen.

4. Zusätzliche UX-Updates

class ImageSnippet { pending: boolean = false; status: string = 'init'; constructor(public src: string, public file: File) {} } @Component({ selector: 'bwm-image-upload', templateUrl: 'image-upload.component.html', styleUrls: ['image-upload.component.scss'] }) export class ImageUploadComponent { selectedFile: ImageSnippet; constructor(private imageService: ImageService){} private onSuccess() { this.selectedFile.pending = false; this.selectedFile.status = 'ok'; } private onError() { this.selectedFile.pending = false; this.selectedFile.status = 'fail'; this.selectedFile.src = ''; } processFile(imageInput: any) { const file: File = imageInput.files[0]; const reader = new FileReader(); reader.addEventListener('load', (event: any) => { this.selectedFile = new ImageSnippet(event.target.result, file); this.selectedFile.pending = true; this.imageService.uploadImage(this.selectedFile.file).subscribe( (res) => { this.onSuccess(); }, (err) => { this.onError(); }) }); reader.readAsDataURL(file); } }

Wir haben dem ImageSnippet neue Eigenschaften hinzugefügt: Ausstehend und Status. Ausstehend kann falsch oder wahr sein, je nachdem, ob gerade ein Bild hochgeladen wird. Der Status ist das Ergebnis des Upload-Vorgangs. Es kann OK oder FEHLGESCHLAGEN sein.

OnSuccess und onError werden nach dem Hochladen des Bildes aufgerufen und legen den Status eines Bildes fest.

Ok, jetzt schauen wir uns die aktualisierte Vorlagendatei an:

 Select Image Image Uploaded Succesfuly! Image Upload Failed! 

Hier zeigen wir unser hochgeladenes Bild und Fehler auf dem Bildschirm an, abhängig vom Status eines Bildes . Wenn das Bild aussteht, zeigen wir auch ein schönes sich drehendes Bild an, um den Benutzer über das Hochladen von Aktivitäten zu informieren.

5. Fügen Sie etwas Styling hinzu

Stile stehen nicht im Mittelpunkt dieses Tutorials, daher können Sie alle SCSS-Stile unter diesem Link abrufen.

Job erledigt! :) Das sollte es für einen einfachen Bild-Upload sein. Wenn etwas nicht klar ist, stellen Sie sicher, dass Sie zuerst den ersten Teil dieses Tutorials gesehen haben.

Wenn Ihnen dieses Tutorial gefällt, können Sie meinen vollständigen Kurs zu Udemy - The Complete Angular, React & Node Guide | lesen Airbnb-Stil App.

Abgeschlossenes Projekt: Mein GitHub-Repository

Videovortrag : YouTube-Tutorial

Prost,

Filip