Kuidas muuta nurgaga piltide üleslaadimist lihtsaks

See on juhendaja teine ​​osa pildi üleslaadimise kohta Amazon S3-sse. Esimese osa leiate siit. Selles artiklis vaatleme nurgaosa.

Võite vaadata ka minu pildi üleslaadimise samm-sammult videoõpetust. Link on toodud selle artikli allosas.

1. Kõigepealt looge mall

Esiteks tahame luua korduvkasutatava komponendi, mis oleks hõlpsasti muudesse komponentidesse ühendatav.

Alustame sisestuse lihtsa HTML-malliga. Ärge unustage valitud stiile rakendada või võite neid hankida minu GitHubi repost.

Tähtis on siin sisenditüüp, mis seatakse faili. Atribuut Accept määratleb sisendiks aktsepteeritud failid. Pilt / * täpsustab, et selle sisendi abil saame valida mis tahes tüüpi pilte. #imageInput on sisendi viide, mille kaudu pääseme juurde üleslaaditud failidele.

Faili valimisel vallandatakse muudatuste sündmus. Vaatame siis klassi koodi.

2. Ärge unustage komponendikoodi

Lagundame selle koodi. ProtsessisFail näete, et saame pildi sisendi, mille saatsime muudatuste sündmuselt. Kirjutades imageInput.files [0], pääseme juurde esimesele failile. Faili lisaomadustele pääsemiseks on meil vaja lugejat. Helistades readAsDataURL, saame pildi base64 esitluse addEventListeneri tagasihelistamisfunktsioonis, mille me varem tellisime.

Tagasihelistamise funktsioonis loome ImageSnippeti eksemplari. Esimene väärtus on pildi base64 esitus, mida kuvame hiljem ekraanil. Teine väärtus on fail ise, mille saadame serverisse üleslaadimiseks Amazon S3-le.

Nüüd peame lihtsalt esitama selle faili ja saatma teenuse kaudu päringu.

3. Vajame ka teenust

See ei oleks nurgarakendus ilma teenuseta. Meie Node serverisse päringu saatmise eest vastutab teenus.

Nagu ma eelmises loengus ütlesin, peame vormi andmete osana saatma pildi. Lisame pildi andmete võtme alla pildi võtme alla (sama võti, mille me enne sõlmes konfigureerisime). Lõpuks peame lihtsalt saatma päringu serverisse vormikohase andmemahuga.

Nüüd saame tähistada. See selleks! Pilt saadeti üleslaadimiseks!

Järgmistes ridades esitan parema kasutajakogemuse saamiseks veel mõne lisakoodi.

4. UX täiendavad värskendused

Lisasime ImageSnippetile uued omadused: ootel ja olek. Ootel võib olla vale või tõene, sõltuvalt sellest, kas pilti praegu üles laaditakse. Olek on üleslaadimisprotsessi tulemus. See võib olla OK või Rikkest.

OnSuccess ja onError kutsutakse pärast pildi üleslaadimist ja nad määravad pildi oleku.

Olgu, vaatame nüüd värskendatud mallifaili:

Siin kuvame ekraanil oma üleslaaditud pildi ja vead olenevalt pildi olekust. Kui pilt on ootel, kuvame ka kena keerleva pildi, et teavitada kasutajat üleslaadimistoimingutest.

5. Lisage stiil

Selle õpetuse keskmes pole stiilid, seega saate selle lingi kaudu leida kõik SCSS-i stiilid.

Töö tehtud! :) Nii peaks see olema lihtsa pildi üleslaadimisel. Kui midagi pole selge, siis veenduge, et vaatasite kõigepealt selle õpetuse esimest osa.

Kui teile see õpetus meeldib, siis lugege julgelt minu kogu kursust teemal Udemy - täielik nurga-, reageerimis- ja sõlmede juhend | Airbnb stiili rakendus.

Lõpetatud projekt: Minu GitHubi hoidla

Videoloeng: YouTube'i õpetus

Terviseks,

Filip