Kako olakšati prijenos slika pomoću programa Angular

Ovo je drugi dio vodiča o tome kako prenijeti sliku na Amazon S3. Prvi dio možete pronaći ovdje. U ovom ćemo članku pogledati Kutni dio.

Također možete pogledati moj korak po korak video vodič za prijenos slike. Poveznica je na dnu ovog članka.

1. Prvo izradite predložak

Prvo, želimo stvoriti komponentu za ponovnu upotrebu koja će se lako povezati s ostalim komponentama.

Počnimo s jednostavnim HTML predloškom za naš unos. Ne zaboravite primijeniti stilove po vašem izboru ili ih možete dobiti iz mog GitHub repo-a.

 Select Image  

Ovdje je važna vrsta unosa koja je postavljena na datoteku. Prihvati atribut definira prihvaćene datoteke za ulaz. Image / * određuje da pomoću ovog unosa možemo odabrati slike bilo koje vrste. #imageInput je referenca ulaza na kojem možemo pristupiti prenesenim datotekama.

Promjena događaj pokreće kada smo odabrali datoteku. Pa pogledajmo kod klase.

2. Ne zaboravite na komponentni kod

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

Raščlanimo ovaj kod. Možete vidjeti u processFile tomdobivamo ulaz slike koji smo poslali iz događaja promjene . Pisanjem imageInput.files [0] pristupamo prvoj datoteci . Čitač nam je potreban da bismo pristupili dodatnim svojstvima datoteke. Pozivanjem readAsDataURL možemo dobiti osnovni prikaz slike u funkciji povratnog poziva addEventListener na koji smo se prethodno pretplatili.

U funkciji povratnog poziva stvaramo instancu ImageSnippeta. Prva vrijednost je osnovni prikaz slike koju ćemo kasnije prikazati na ekranu. Druga vrijednost je sama datoteka koju ćemo poslati poslužitelju za prijenos na Amazon S3.

Sada samo trebamo dostaviti ovu datoteku i poslati zahtjev putem usluge.

3. Trebamo i uslugu

To ne bi bila Angular aplikacija bez usluge. Usluga će biti odgovorna za slanje zahtjeva našem poslužitelju Node.

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

Kao što sam vam rekao na prethodnom predavanju, moramo poslati sliku kao dio podataka obrasca . Sliku ćemo dodati ispod ključa slike kako bismo oblikovali podatke (isti ključ koji smo prethodno konfigurirali u Nodeu). Konačno, samo trebamo poslati zahtjev poslužitelju s formData u korisnom opterećenju.

Sad možemo slaviti. To je to! Slika poslana za prijenos!

U sljedećim redovima pružit ću dodatni kôd za bolje korisničko iskustvo.

4. Dodatna UX ažuriranja

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

Dodali smo nova svojstva ImageSnippetu: na čekanju i statusu. Na čekanju može biti lažno ili istinito, ovisno o tome da li se slika trenutno prenosi. Status je rezultat postupka prijenosa. Može biti u redu ili neuspješno.

OnSuccess i onError pozivaju se nakon prijenosa slike i oni postavljaju status slike.

Ok, pogledajmo sada ažuriranu datoteku predloška:

 Select Image Image Uploaded Succesfuly! Image Upload Failed! 

Ovdje ćemo se prikazuju naše prenesene slike i greške na zaslonu, ovisno o stanju jedne slike . Kada je slika na čekanju, prikazujemo i lijepu vrtnju kako bismo obavijestili korisnika o aktivnosti prijenosa.

5. Dodajte malo stylinga

Stilingi nisu u fokusu ovog vodiča, tako da na ovoj poveznici možete dobiti sve SCSS stilove.

Posao završen! :) To bi trebalo biti to za jednostavan prijenos slika. Ako nešto nije jasno, provjerite jeste li prvo pogledali prvi dio ovog vodiča.

Ako vam se sviđa ovaj tutorial, slobodno provjerite moj cjeloviti tečaj Udemy - Kompletni vodič za kutne, reakcijske i čvorove | Aplikacija u stilu Airbnb.

Završen projekt: Moje spremište GitHub

Video predavanje : YouTube Vodič

Živjeli,

Filipe