de Filip Jerga

Cum să facilitați încărcarea imaginilor cu Angular

Cum sa facilitati incarcarea imaginilor cu Angular

Aceasta este a doua parte a tutorialului despre cum să încărcați o imagine pe Amazon S3. Puteți găsi prima parte aici. În acest articol, vom arunca o privire asupra părții unghiulare.

De asemenea, puteți urmări tutorialul meu video pas cu pas al încărcării unei imagini. Linkul este furnizat în partea de jos a acestui articol.

1. Creați mai întâi un șablon

În primul rând, dorim să creăm o componentă reutilizabilă care să poată fi conectată cu ușurință la alte componente.

Să începem cu un șablon HTML simplu pentru introducerea noastră. Nu uitați să aplicați stilurile la alegere, sau le puteți obține de la mine Repo GitHub.

ad-banner
<label class="image-upload-container btn btn-bwm">
  <span>Select Image</span>
  <input #imageInput
         type="file"
         accept="image/*"
         (change)="processFile(imageInput)">
</label>

Important aici este un tip de intrare, care este setat la a fişier. Accept atributul definește fișierele acceptate pentru intrare. Imagine/* specifică faptul că putem alege imagini de orice tip prin această intrare. #imageInput este o referință de intrare pe care putem accesa fișierele încărcate.

A Schimbare evenimentul este declanșat atunci când selectăm un fișier. Deci, să aruncăm o privire asupra codului clasei.

2. Nu uitați pentru Codul componentelor

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

Să descompunem acest cod. Puteți vedea în processFile acea primim o intrare de imagine pe care am trimis-o de la Schimbare eveniment. În scris imageInput.files[0] accesăm primul fişier. Avem nevoie de cititor pentru a accesa proprietăți suplimentare ale unui fișier. Sunând readAsDataURL, putem obține o reprezentare de bază64 a unei imagini în funcția de apel invers a addEventListener ne-am abonat înainte.

Într-o funcție de apel invers, creăm o instanță a ImageSnippet. Primul valoarea este o reprezentare de bază64 a unei imagini pe care o vom afișa mai târziu pe ecran. Al doilea value este un fișier în sine, pe care îl vom trimite serverului pentru încărcare pe Amazon S3.

Acum, trebuie doar să furnizăm acest fișier și să trimitem o cerere printr-un serviciu.

3. Avem nevoie și de un serviciu

Nu ar fi o aplicație Angular fără un serviciu. Serviciul va fi cel responsabil pentru trimiterea unei cereri către serverul nostru Node.

export class ImageService {

  constructor(private http: Http) {}


  public uploadImage(image: File): Observable<Response> {
    const formData = new FormData();

    formData.append('image', image);

    return this.http.post('/api/v1/image-upload', formData);
  }
}

După cum v-am spus în prelegerea anterioară, trebuie să trimitem o imagine ca parte a date de formular. Vom adăuga imaginea sub cheia unui imagine pentru a forma date (aceeași cheie pe care am configurat-o anterior în Nod). În cele din urmă, trebuie doar să trimitem o cerere către server cu formData într-o sarcină utilă.

Acum putem sărbători. Asta e! Imagine trimisă pentru încărcare!

În rândurile următoare, voi oferi câteva coduri suplimentare pentru o experiență mai bună a utilizatorului.

4. Actualizări UX suplimentare

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

Am adăugat noi proprietăți la ImageSnippet: În așteptare și Stare. In asteptarea poate fi fals sau adevărat, în funcție de încărcarea unei imagini. stare este rezultatul procesului de încărcare. Poate fi O.K sau A EȘUAT.

OnSuccess și onError sunt apelate după încărcarea imaginii și stabilesc starea unei imagini.

Ok, acum să aruncăm o privire asupra fișierului șablon actualizat:

<label class="image-upload-container btn btn-bwm">
  <span>Select Image</span>
  <input #imageInput
         type="file"
         accept="image/*"
         (change)="processFile(imageInput)">
</label>


<div *ngIf="selectedFile" class="img-preview-container">

  <div class="img-preview{{selectedFile.status === 'fail' ? '-error' : ''}}"
       [ngStyle]="{'background-image': 'url('+ selectedFile.src + ')'}">
  </div>

  <div *ngIf="selectedFile.pending" class="img-loading-overlay">
    <div class="img-spinning-circle"></div>
  </div>

  <div *ngIf="selectedFile.status === 'ok'" class="alert alert-success"> Image Uploaded Succesfuly!</div>
  <div *ngIf="selectedFile.status === 'fail'" class="alert alert-danger"> Image Upload Failed!</div>
</div>

Aici afișăm imaginea încărcată și erorile pe ecran, în funcție de stat a unui imagine. Când imaginea este în așteptare, vom afișa, de asemenea, o frumoasă imagine rotativă pentru a anunța utilizatorul despre activitatea de încărcare.

5. Adăugați ceva stil

Stilurile nu sunt în centrul acestui tutorial, deci puteți obține toate stilurile SCSS în acest legătură.

Treaba făcuta! 🙂 Asta ar trebui să fie pentru o încărcare simplă a imaginii. Dacă ceva nu este clar, asigurați-vă că ați urmărit mai întâi prima parte a acestui tutorial.

Dacă vă place acest tutorial, nu ezitați să verificați cursul meu complet despre UdemyGhidul complet unghiular, de reacție și nod | Aplicație în stil Airbnb.

Proiect finalizat: Depozitul meu GitHub

Lectură video: Tutorial YouTube

Noroc,

Filip