Sådan oprettes en fleksibel billedoverførerkomponent ved hjælp af Vue.js 2.0

Baggrundsbillede kredit: rawpixel på Unsplash.com

Jeg har kodet med Vue.js 2.0 i cirka et halvt år nu, og det er ret fantastisk. Det er utroligt intuitivt og enkelt. Opdelingen mellem HTML / CSS / Javascript gør både indlæring og kodning til en leg.

Men problemet (og det sjove) ved kodning med en relativt ny ramme er manglen på tutorials til det, du vil opbygge. Især når du har en bestemt ting i tankerne.

Jeg løb ind i dette problem, da jeg forsøgte at opbygge en profilfoto-uploader til Torneo. Javisst, jeg kunne have brugt en fancy pakke, men hvor er det sjove i det?

Så ved at ændre og kombinere to gode tutorials, oprettede jeg min egen genanvendelige image uploader-komponent.

Tjek git-lageret for alle koder.

Ønsket opførsel

Jeg oprettede komponenten med følgende mål i tankerne:

  • Komponenten skal kunne aktiveres af ethvert element i dens overordnede komponent til at uploade billeder
  • Vi skulle være i stand til at se en forhåndsvisning af billedet i den overordnede komponent
  • Det uploadede billede skal gemmes i et FormData-format for at sende til back-end
  • Komponenten skal kontrollere for en størrelsesbegrænsning i det uploadede billede (dette kan også gøres i back-end, men det er lidt hurtigere i front-end)
  • En fil ad gangen (bemærk at denne tutorial taler om, hvordan man håndterer flere filer - alt hvad du behøver er nogle loops)

Trin 1: Opsætning

Vi kommer i gang med at installere den simple webpack-skabelon. Vi installerer også Vuetify for at spare lidt tid på styling. Bemærk, at alt indpakket i kommer fra Vuetify. Da deres tags er temmelig selvforklarende, går jeg ikke så dybt ind i det. Jeg overlader dig til at læse deres dokumentation.

# installer vue-cli
npm installere vue-cli -g

# initier webpack-simple, og følg instruktionerne
vue init webpack-enkel billed-upload
# installere afhængigheder
npm installation
# installer Vuetify
npm installere vuetify - gem
En let fest

Trin 2: Opret skabelon til billedoverførsel

Store! Nu hvor vi har skabelonerne opsat og installeret, kan vi slette ethvert stedindehaverindhold. Derefter kan vi oprette en ny komponentfil til billedoverføreren.


  
    
    
           
    
    
    
    
      
         {{errorText}} 
        
           
           Har du det! 
        
      
    
  
  1. For at gøre billedoverførerkomponenten i stand til at blive aktiveret af ethvert element i den overordnede komponent, kan vi drage fordel af Vues “slot” -funktionalitet.
  2. Da vi ønsker, at “trigger” for input skal være i den overordnede komponent, ønsker vi funktionaliteten af ​​filinput i underkomponenten uden at kunne se den. Vi kan ændre indgangsstil til "display: ingen" for at skjule det.
  3. Billedindgangen tildeles en "ref", så når vi klikker på slot, kan vi aktivere billedinput ved hjælp af dets reference.
  4. For at gøre billedoverførslen mere brugervenlig kan vi bruge en dialog til at vise eventuelle fejl.

Dernæst kan vi bruge nogle Vue.js-magi i JavaScript-delen til at massere noget liv i vores komponent: