Angular ilə şəkillərin yüklənməsini necə asanlaşdıracağınıza dair məlumat

Bu, Amazon S3-ə bir şəkil yükləmək üçün təlimin ikinci hissəsidir. İlk hissəni burada tapa bilərsiniz. Bu yazıda Açısal hissə ilə məşğul olacağıq.

Bir şəkil yükləməyimin addım-addım video təlimatına da baxa bilərsiniz. Bağlantı bu məqalənin sonunda.

1. Əvvəlcə bir şablon yaradın

Birincisi, digər komponentlərə asanlıqla daxil edilə bilən təkrar istifadə edilə bilən bir komponent yaratmaq istəyirik.

Girişimiz üçün sadə bir HTML şablonu ilə başlayaq. Seçdiyiniz üslubları tətbiq etməyi unutmayın və ya onları GitHub repomdan yükləyə bilərsiniz.

Burada vacib olan bir fayla təyin edilmiş bir giriş növüdür. Qəbul atributu giriş üçün qəbul edilmiş sənədləri müəyyənləşdirir. Image / * bu giriş ilə istənilən növ şəkilləri seçə biləcəyimizi göstərir. #imageInput, yüklənmiş sənədlərə daxil ola biləcəyimiz girişlər üçün bir istinaddır.

Bir fayl seçdiyimiz zaman bir Dəyişmə hadisəsi qaldırılır. Beləliklə, sinif koduna baxaq.

2. Komponent kodunu unutmayın

Bu kodu pozaq. ProcessFile-də dəyişiklik hadisəsindən göndərdiyimiz bir şəkil girişini aldığımızı görə bilərsiniz. İlk fayla imageInput.files [0] yazaraq daxil oluruq. Bir sənədin əlavə xüsusiyyətlərini əldə edə bilmək üçün bir oxucuya ehtiyacımız var. ReadAsDataURL-a zəng edərək əvvəllər abunə olan addEventListener-in geri çağırma funksiyasında bir görüntünün base64 təsvirini əldə edə bilərik.

Geri çağırma funksiyasında ImageSnippet nümunəsini yaradırıq. Birinci dəyər, sonradan ekranda görünəcək bir görüntünün base64 nümayəndəliyidir. İkinci dəyər Amazon S3-ə yükləmək üçün serverə göndərəcəyimiz bir sənədin özüdür.

İndi yalnız bu faylı təmin etməli və bir xidmət vasitəsilə sorğu göndərməliyik.

3. Bizim də bir xidmətə ehtiyacımız var

Xidmət olmadan Açısal bir tətbiq olmazdı. Xidmət, qovşaq serverimizə sorğu göndərməkdən məsuldur.

Əvvəlki mühazirədə dediyim kimi, forma məlumatlarının bir hissəsi olaraq bir şəkil göndərməliyik. Məlumatı formalaşdırmaq üçün şəklin bir açarının altına əlavə edəcəyik (əvvəllər Node-da konfiqurasiya etdiyimiz eyni açar). Nəhayət, etməyimiz lazım olan bir şey, formada yüklənmiş formada serverə bir sorğu göndərməkdir.

İndi qeyd edə bilərik. Bu belədir! Şəkil yükləmək üçün göndərildi!

Növbəti bir neçə sətirdə daha yaxşı bir istifadəçi təcrübəsi üçün əlavə kod təqdim edəcəyəm.

4. Əlavə UX yeniləmələri

ImageSnippet-ə yeni xüsusiyyətlər əlavə etdik: Gözləmə və Vəziyyət. Gözlənilən bir şəkil yükləndiyinə görə yanlış və ya doğru ola bilər. Status yükləmə prosesinin nəticəsidir. Tamam və ya uğursuz ola bilər.

OnSuccess və onError bir şəkil yükləndikdən və bir şəkil vəziyyətini təyin etdikdən sonra çağırılır.

Tamam, indi yenilənmiş şablon sənədinə nəzər salaq:

Burada bir şəkil vəziyyətindən asılı olaraq yüklədiyimiz şəkli və səhvlərimizi ekranda göstərəcəyik. Şəkil gözləyirsə, istifadəçiyə yükləmə fəaliyyəti barədə məlumat vermək üçün fırlanan bir şəkil də göstərilir.

5. Bəzi üslub əlavə edin

Stilinqlər bu təlimatın mərkəzində deyil, buna görə bütün SCSS üslublarına bu keçid vasitəsilə daxil olmaq olar.

İş bitdi! :) Sadə bir şəkil yükləməsi üçün belə olmalıdır. Bir şey aydın deyilsə, əvvəlcə bu təlimatın ilk hissəsini izlədiyinizə əmin olun.

Bu təlimatı bəyənirsinizsə, Udemy - Tam Bucaqlı, Reaktiv və Düyün Bələdçisindəki tam kursuma baxa bilərsiniz | Airbnb stil tətbiqi.

Tamamlanmış layihə: Mənim GitHub deposum

Video mühazirə: YouTube təlimatı

Salam,

Filip