KĀ AUGŠUPIELĀDĒT FAILUS SERVERĪ, IZMANTOJOT IONIC

Šajā apmācībā mēs izveidojam serveri, kas pieņem failu augšupielādi Node/Express, kā arī priekšpuses lietojumprogrammu, kas izmanto FormData API, lai nosūtītu failus uz serveri.

0:00 Ievads
2:24 Mezgls/Express Server
6:17 StencilJS Frontend
8:44 React Frontend
11:11 Stūraina priekšējā daļa
13:09 Secinājums

Failu augšupielādes apstrāde no klienta puses lietojumprogrammas (piemēram, Jonu lietojumprogramma) uz aizmugures serveri (piem. Mezgls / Ekspress / NestJS ) ir pavisam kas cits, nekā izmantot | _+_ | pieprasījumus nosūtīt teksta datus. Priekšpusē tas var izskatīties diezgan līdzīgi kā | _+_ | ievade izskatās gandrīz tāda pati kā jebkura cita HTML ievade:

POST

Jūs varētu sagaidīt, ka varat vienkārši | _+_ | šos datus, izmantojot standarta HTTP pieprasījumu serverim, un izgūt failu tādā pašā veidā, kā jūs izgūtu jebkuru citu veidlapas vērtību.

Tomēr, failu augšupielāde nedarbojas šādi . Kā jūs droši vien varat iedomāties, teksta vērtību nosūtīšana uz serveri, piemēram, | _+_ | vai | _+_ | ir diezgan ātrs/vienkāršs, un serverim tas būtu uzreiz pieejams. Fails var būt patvaļīgi liels, un, ja mēs vēlamies nosūtīt 3 GB video kopā ar mūsu | _+_ | pieprasījums, tad paies zināms laiks, līdz visi šie baiti tiks nosūtīti tīklā.

Šajā apmācībā mēs izmantosim Jonu lietojumprogrammu kā priekšējo klientu, un a Mezgls / Ekspress serveris kā aizmugure, lai demonstrētu šos jēdzienus. Esmu arī publicējis citu apmācību, kas aptver izmantojot NestJS, lai apstrādātu failu augšupielādi aizmugurē . Lai gan mēs šeit izmantojam īpašu tehnoloģiju kopu, aptvertie pamatjēdzieni diezgan vispārīgi attiecas uz citiem kontekstiem.

PIEZĪME: Šī apmācība būs vērsta uz failu augšupielādi, izmantojot standarta | _+_ | ievade tīmeklī. Citā apmācībā mēs aplūkosim vietējo failu augšupielāžu apstrādi (piemēram, no lietotāju fotoattēlu galerijas jonu lietojumprogrammā, kas sākotnēji darbojas operētājsistēmā iOS/Android).

kā augšupielādēt failus uz github no termināļa

Teorija neinteresē? Pārlēkt tieši uz piemērs . Šajā apmācībā tiks iekļauti piemēri Jonu/trafaretuJS , Jonu/leņķa , un Ionic/React .

Daudzdaļīgu formu datu loma

Ja ievades uztveršanai izmantojat standarta HTML veidlapas tagu un | _+_ | to serverim (ko mēs nedarīsim), tad jums būs jāiestata tā | _+_ | (kodēšanas veids) līdz | _+_ |:

file

Tas ir tikai viens veids, kā kodēt veidlapas datus, kas jānosūta uz kādu serveri. Veidlapas noklusējuma kodēšanas veids ir | _+_ | bet, ja vēlamies augšupielādēt failu, izmantojot | _+_ | ievades veids, tad mums jāiestata | _+_ | līdz | _+_ |. Šis kodēšanas veids nav tik efektīvs kā | _+_ | bet, ja mēs izmantojam | _+_ | tad tas nekodēs rakstzīmes, kas nozīmē, ka augšupielādēto failu dati netiks bojāti kodēšanas procesā.

Veidlapas datu API izmantošana

Kā jau minēju, mēs neizmantosim standarta HTML | _+_ | ar | _+_ | un | _+_ |. Tas ir izplatīts kontekstā ar Jonu / Stūraina / Reaģēt / TrafaretsJS lietojumprogrammām, jo mēs parasti ieviešam savu veidlapu loģiku un apstrādājam savu HTTP pieprasījumu iesniegšanu, lai iesniegtu veidlapas datus (nevis iestatot veidlapas | _+_ | un liekot lietotājam noklikšķināt uz pogas | _+_ |).

Tā kā mēs tikai izmantojam veidlapas ievades elementus, lai iegūtu datus, nevis izmantojam HTML veidlapu, lai faktiski iesniegtu datus par mums, mums ir nepieciešams veids, kā nosūtīt šos iegūtos datus kopā ar HTTP pieprasījumu, ko mēs kādā brīdī aktivizējam. Tas ir pietiekami vienkārši, izmantojot vienkāršus teksta datus, jo mēs varam tos manuāli pievienot tieši ķermenim, piemēram:

Šajā scenārijā mēs varētu vienkārši nomainīt | _+_ | un | _+_ | ar jebkādiem datiem, ko lietotājs ievadījis veidlapas ievadē (tieši tas, kā tas tiek panākts, būs atkarīgs no izmantotā ietvara).

kā uzmeklēt kādu Twitter

Ja vēlaties iegūt vairāk informācijas par nosūtīšanu | _+_ | pieprasījumus ar Ielādēt API jūs varat lasīt: HTTP pieprasījumi StencilJS ar Fetch API . Šī ir laba iespēja, ja izmantojat TrafaretsJS vai Reaģēt , bet, ja jūs izmantojat Stūraina jums labāk būtu izmantot iebūvēto | _+_ |.

Bet kā rīkoties, pievienojot failus HTTP pieprasījuma pamattekstam?

Mēs nevar vienkārši pievienojiet failus pieprasījuma pamattekstam, kā mēs to darītu ar vienkāršām teksta vērtībām. Šī ir vieta, kur FormData API ienāk. | _+_ | ļauj dinamiski izveidot veidlapas datus, kurus varam nosūtīt, izmantojot HTTP pieprasījumu, faktiski neizmantojot HTML | _+_ |. Labākais ir tas, ka izveidotie veidlapas dati tiks kodēti tāpat kā tad, ja mēs būtu izmantojuši veidlapu ar | _+_ | no | _+_ | tieši to mēs vēlamies augšupielādēt failus.

Viss, kas jums jādara, ir noklausīties izmaiņu notikumu failu ievades laukos, piem. iekšā TrafaretsJS / Reaģēt :

POST

vai leņķiskais:

username

un pēc tam nododiet šo notikumu kādai metodei, kas padarīs datus pieejamus visiem, kas veido jūsu veidlapas datus iesniegšanai (tūlīt vai vēlāk). Ar TrafaretsJS tas izskatītos šādi:

password

vai ar Reaģēt :

POST

vai ar Stūraina :

file

Ja nevēlaties iesniegt veidlapu tūlīt pēc | _+_ | atklāšanas notikumu, varat saglabāt vērtību | _+_ | kaut kur, kamēr neesat gatavs to izmantot (piemēram, dalībnieka mainīgajā Stūraina vai TrafaretsJS , vai ar | _+_ | iekšā Reaģēt ). Paturiet prātā, ka jums ir īpaši jāsaglabā izmaiņu/iesniegšanas notikuma rezultāts, lai iegūtu atsauci uz | _+_ |, mēģinot iegūt veidlapas vadīklas pašreizējo vērtību, kad tā jāizmanto (kā jūs to darītu) ar citiem standarta | _+_ | laukiem) nedarbosies, tas vienkārši atgriezīsies:

POST

Tas ir drošības līdzeklis, ko ievieš pārlūkprogrammas, lai novērstu lietotāju mašīnas failu sistēmas struktūras atklāšanu, izmantojot JavaScript.

Failu augšupielādes apstrāde, izmantojot Multer

Mums ir ideja, kā nosūtīt failu no priekšpuses uz aizmugures serveri, bet ko mēs ar to darām, kad tas tur nokļūst? Ja mēs izmantotu | _+_ | lai nosūtītu standarta teksta datus uz a Mezgls / Ekspress serverī mēs varētu vienkārši izveidot | _+_ | galapunktu un iegūstiet atsauci uz datiem, izmantojot pieprasījumus | _+_ | objekts, piemēram:

enctype

Šī nedarbosies mūsu failu ievadīšanai.

Mums šie dati laika gaitā jāplūst mūsu aizmugurē, lai starp vietējo klienta puses lietojumprogrammu un aizmugures serveri notiktu nepārtraukta saziņa, līdz augšupielāde ir pabeigta. Atcerieties, ka, iespējams, mēs mēģinām augšupielādēt 3 GB video failu, un tas prasīs nedaudz laika.

Precīza failu augšupielādes apstrāde būs atkarīga no izmantotās aizmugures programmas, bet Ekspress pēc noklusējuma neveic failu augšupielādi. Tāpēc mums ir jāizmanto kāda veida papildu bibliotēka/starpprogrammatūra, lai apstrādātu mūsu | _+_ | kas tiek sūtīts no mūsu klienta puses lietojumprogrammas uz serveri.

Viens veids, kā to izdarīt, ir izmantot autobraucējs kas spēj parsēt ienākošo | _+_ |, bet ir arī nedaudz sarežģīts. Mēs varam vienkāršot lietas, izmantojot muldētājs kas pamatā sēž virsū autobraucējs un risina sarežģītākos aspektus.

Multers apstrādās datu plūsmas, ko nodrošina autobraucējs mums un automātiski augšupielādējiet failu noteiktā servera adresātā. Ja vēlaties bufera straumi no | _+_ | tā vietā, lai failu saglabātu sistēmā, varat izmantot arī atmiņas uzglabāšanas opciju, kas | _+_ | nodrošina (augšupielādētais fails tiks saglabāts atmiņā, lai jūs varētu rīkoties pēc saviem ieskatiem, nevis ierakstīt failā).

Mēs izmantosim | _+_ | tieši mūsu Node/Express servera piemērā, bet | _+_ | ir arī kas NestJS izmanto aizkulisēs, lai apstrādātu failu augšupielādi (mēs to apskatīsim sadaļā NestJS apmācība ). Pēc brīža mēs pilnībā iepazīstināsim ar šo aizmugures sistēmu, taču tas ir tas, ko izmanto | _+_ | izskatās kā.

multipart/form-data

Mēs vienkārši norādām galamērķa mapi, kur faili jāaugšupielādē, un norādām augšupielādējamā faila lauka nosaukumu | _+_ |. Tagad, kad dati tiek nosūtīti, izmantojot | _+_ | pieprasījums | _+_ | maršrutā fails tiks automātiski augšupielādēts | _+_ | direktoriju.

np peldēt uz int

Kopā ar failu augšupielādi joprojām varat nosūtīt arī citus standarta veidlapas datus (piemēram, teksta ievadi), un tie būs pieejami | _+_ | no pieprasījuma, ti: | _+_ |.

Tagad sāksim veidot praktisku piemēru Jonu un Mezgls / Ekspress . Šajā pārskatā tiks pieņemts, ka jums ir pamatzināšanas par abiem Jonu un Mezgls / Ekspress .

Sīkāka informācija un avota kods emuāra ziņā: https://www.joshmorony.com/handling-file-uploads-in-ionic-web/

#jonu #mezgls #izteikt #api #tīmekļa izstrāde

www.youtube.com