Sådan gøres det nemt at uploade billeder med Angular

Dette er den anden del af vejledningen om, hvordan man uploader et billede til Amazon S3. Du kan finde den første del her. I denne artikel vil vi se på den vinklede del.

Du kan også se min trinvise videoundervisning af et upload af billede. Linket findes nederst i denne artikel.

1. Opret først en skabelon

Først vil vi oprette en genanvendelig komponent, der let kan tilsluttes andre komponenter.

Lad os starte med en simpel HTML-skabelon til vores input. Glem ikke at anvende stilarter efter eget valg, ellers kan du få dem fra min GitHub repo.

 Select Image  

Vigtigt her er en type input, der er indstillet til en fil. Den Accepter attribut definerer accepterede filer for input. Image / * angiver, at vi kan vælge billeder af enhver type ved hjælp af dette input. #imageInput er en reference til input, som vi kan få adgang til uploadede filer på.

En ændringshændelse udløses, når vi vælger en fil. Så lad os se på klassekoden.

2. Glem ikke komponentkoden

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

Lad os nedbryde denne kode. Du kan se i processen Fil detvi får et billedinput, vi sendte fra ændringshændelsen . Ved at skrive imageInput.files [0] får vi adgang til den første fil . Vi har brug for en læser for at få adgang til yderligere egenskaber for en fil. Ved at kalde readAsDataURL kan vi få en base64-repræsentation af et billede i tilbagekaldsfunktionen for addEventListener, vi abonnerede på før.

I en tilbagekaldsfunktion opretter vi en forekomst af ImageSnippet. Den første værdi er en base64-repræsentation af et billede, som vi senere viser på skærmen. Den anden værdi er selve filen, som vi sender til serveren til upload til Amazon S3.

Nu skal vi bare levere denne fil og sende en anmodning via en tjeneste.

3. Vi har også brug for en service

Det ville ikke være en Angular-app uden en tjeneste. Tjenesten er den, der er ansvarlig for at sende en anmodning til vores Node-server.

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

Som jeg fortalte dig i forrige forelæsning, er vi nødt til at sende et billede som en del af formulardataene . Vi tilføjer billedet under nøglen til et billede for at danne data (den samme nøgle, som vi konfigurerede før i Node). Endelig skal vi bare sende en anmodning til serveren med formData i en nyttelast.

Nu kan vi fejre. Det er det! Billedet blev sendt for at uploade!

I de næste linjer vil jeg give nogle ekstra kode for en bedre brugeroplevelse.

4. Yderligere UX-opdateringer

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

Vi tilføjede nye egenskaber til ImageSnippet: Ventende og status. Afventende kan være falsk eller sand, afhængigt af om et billede i øjeblikket uploades. Status er resultatet af uploadprocessen. Det kan være OK eller FEJLET.

OnSuccess og onError kaldes efter upload af billede, og de indstiller status for et billede.

Ok, lad os nu se på den opdaterede skabelonfil:

 Select Image Image Uploaded Succesfuly! Image Upload Failed! 

Her viser vi vores uploadede billede og fejl på skærmen afhængigt af tilstanden på et billede . Når billedet afventer, viser vi også et godt roterende billede for at underrette brugeren om uploadaktivitet.

5. Tilføj lidt styling

Stylinger er ikke fokus for denne tutorial, så du kan få alle SCSS-stilarter i dette link.

Færdigt arbejde! :) Det skulle være det for en simpel billedupload. Hvis noget ikke er klart, skal du sørge for, at du først har set den første del af denne tutorial.

Hvis du kan lide denne vejledning, er du velkommen til at tjekke mit fulde kursus på Udemy - Den komplette vinkel-, reagerings- og nodevejledning | App til Airbnb-stil.

Afsluttet projekt: Mit GitHub-lager

Videoforelæsning : YouTube-vejledning

Skål,

Filip