Hogyan lehet megkönnyíteni a kép feltöltését az Angular segítségével

Ez az oktatóanyag második része arról, hogyan tölthetünk fel képeket az Amazon S3-ra. Az első részt itt találja. Ebben a cikkben egy pillantást vetünk a szögletes részre.

Megnézheti a képfeltöltésről szóló lépésről lépésre bemutatott oktatóanyagomat is. A link a cikk alján található.

1. Először hozzon létre egy sablont

Először egy újrafelhasználható komponenst szeretnénk létrehozni, amely könnyen bedugható más alkatrészekbe.

Kezdjük egy egyszerű HTML-sablonnal a bevitelünkhöz. Ne felejtsd el alkalmazni a választott stílusokat, különben beszerezheted őket a GitHub repóból.

 Select Image  

Fontos itt a bemenet típusa , amelyet fájlként állítunk be . Az Accept attribútum meghatározza a bevitt fájlokat. Az Image / * megadja, hogy ezzel a bemenettel bármilyen típusú képet választhatunk. Az #imageInput egy olyan bemenet hivatkozása, amelyen hozzáférhetünk a feltöltött fájlokhoz.

A Change esemény akkor, amikor egy fájl kiválasztásához. Vessünk egy pillantást az osztály kódjára.

2. Ne felejtsd el a komponens kódot

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

Bontjuk le ezt a kódot. Láthatjuk a processFile hogyképet kapunk a változás eseményről. Az imageInput.files [0] írásával elérjük az első fájlt . Szükségünk van egy olvasó eléréséhez további fájl tulajdonságainak. A readAsDataURL meghívásával megszerezhetjük a kép base64 reprezentációját az addEventListener korábban visszahívott függvényében .

Visszahívási funkcióban létrehozzuk az ImageSnippet példányát. Az első érték egy kép base64 ábrázolása, amelyet később a képernyőn megjelenítünk. A második érték maga a fájl, amelyet elküldünk a szerverre feltöltésre az Amazon S3-ra.

Most csak meg kell adnunk ezt a fájlt, és kérést kell küldenünk egy szolgáltatáson keresztül.

3. Szükségünk van egy szolgáltatásra is

Szolgáltatás nélkül nem lenne Angular alkalmazás. A szolgáltatás lesz a felelős azért, hogy kérést küldjön a Node szerverünkre.

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

Ahogy az előző előadásban elmondtam, képet kell küldenünk az űrlapadatok részeként . A képet egy kép kulcsa alá csatoljuk , hogy adatokat alkossunk (ugyanaz a kulcs, amelyet korábban a Node-ban konfiguráltunk). Végül csak egy kérelmet kell küldenünk a szervernek a formData -val egy hasznos terhelésben.

Most ünnepelhetünk. Ez az! Kép elküldve feltöltésre!

A következő sorokban adok néhány kiegészítő kódot a jobb felhasználói élmény érdekében.

4. További UX frissítések

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

Új tulajdonságokkal bővítettük az ImageSnippet: Függőben és állapotot. A függőben lévő adatok hamisak vagy hamisak lehetnek, attól függően, hogy egy képet éppen feltöltenek-e. Az állapot a feltöltési folyamat eredménye. Lehet rendben vagy sikertelen.

A képfeltöltés után az OnSuccess és az onError hívódik meg, és beállítja a kép állapotát.

Ok, most nézzük meg a frissített sablonfájlt:

 Select Image Image Uploaded Succesfuly! Image Upload Failed! 

Itt a feltöltött képünket és hibáinkat jelenítjük meg a képernyőn , a kép állapotától függően . Amikor a kép függőben van, egy szép forgó képet is megjelenítünk, hogy értesítsük a felhasználót a feltöltési tevékenységről.

5. Adjon hozzá néhány fazont

A stílus nem a jelen oktatóanyag középpontjában áll, így az összes SCSS-stílus megtalálható ezen a linken.

Elvégzett munka! :) Ennek egy egyszerű képfeltöltéshez kell lennie. Ha valami nem világos, győződjön meg róla, hogy először az oktatóanyag első részét nézte meg.

Ha tetszik ez az oktatóanyag, nézze meg bátran az Udemy teljes tanfolyamát - A teljes szögletes, reakció és csomópont útmutató | Airbnb stílusú alkalmazás.

Befejezett projekt: Saját GitHub-tár

Videóelőadás : YouTube bemutató

Egészségére,

Filip