Obstajajo trije glavni načini za upravljanje nalaganja datotek v Node.js: shranjevanje slik neposredno na vaš strežnik, shranjevanje slik binarne podatke ali podatke nizov base64 v vašo zbirko podatkov in uporabo veder Amazon Web Service (AWS) S3 za shranjevanje in upravljanje slike.
Tukaj se boste naučili uporabljati Multer, vmesno programsko opremo Node.js, za nalaganje in shranjevanje slik neposredno na strežnik v aplikacijah Node.js v nekaj korakih.
1. korak: Nastavitev razvojnega okolja
Koda, uporabljena v tem projektu, je na voljo v a Repozitorij GitHub in je brezplačen za uporabo pod licenco MIT.
Najprej ustvarite mapo projekta in se premaknite vanjo tako, da zaženete naslednji ukaz:
mkdir multitutorial
cd multi-tutorial
Nato inicializirajte npm v imeniku vašega projekta tako, da zaženete:
npm init -y
Nato boste morali namestiti nekaj odvisnosti. Odvisnosti, potrebne za to vadnico, vključujejo:
- Express: Express je ogrodje Node.js ki zagotavlja robusten nabor funkcij za spletne in mobilne aplikacije. Omogoča lažjo gradnjo zalednih aplikacij z Node.js.
- Multer: Multer je hitra vmesna programska oprema, ki poenostavlja nalaganje in shranjevanje slik na vaš strežnik.
Namestite pakete z upravljalnik paketov vozlišča s tekom:
npm namestite express multer
Nato ustvarite app.js datoteko v korenskem imeniku vašega projekta in dodajte spodnji blok kode, da ustvarite osnovni strežnik Express:
//app.js
konst izraziti = zahtevati('hitro');
konst app = express();
konst vrata = proces.env. PRISTANIŠČE || 3000;
app.listen (vrata, ()=>{
konzola.log(`Aplikacija posluša vrata ${port}`);
});
2. korak: Konfiguracija Multerja
Najprej uvozite multer v tvojem app.js mapa.
konst multer = zahtevati("multer");
multer zahteva mehanizem za shranjevanje, ki vsebuje informacije o imeniku, kjer bodo shranjene naložene datoteke, in o tem, kako bodo datoteke poimenovane.
A multer mehanizem za shranjevanje se ustvari s klicem diskStorage metoda na uvoženem multer modul. Ta metoda vrne a StorageEngine implementacija, konfigurirana za shranjevanje datotek v lokalni datotečni sistem.
Potrebuje konfiguracijski objekt z dvema lastnostma: cilj, ki je niz ali funkcija, ki določa, kje bodo shranjene naložene slike.
Druga lastnost, Ime datoteke, je funkcija, ki določa imena naloženih datotek. Zahteva tri parametre: zahtevano, mapain povratni klic (cb). zahtevano je Express Prošnja predmet, mapa je objekt, ki vsebuje informacije o obdelani datoteki, in cb je povratni klic, ki določa imena naloženih datotek. Funkcija povratnega klica sprejme napako in ime datoteke kot argumenta.
Dodajte spodnji kodni blok svojemu app.js datoteka za ustvarjanje mehanizma za shranjevanje:
//Nastavitev mehanizma za shranjevanje
konst storageEngine = multer.diskStorage({
cilj: "./slike",
ime datoteke: (req, datoteka, cb) => {
cb(nič, `${Datum.now()}--${file.originalnoname}`);
},
});
V zgornjem bloku kode nastavite cilj lastnina za ”./slike«, tako bodo slike shranjene v imeniku vašega projekta v slike mapo. Potem ste pri povratnem klicu opravili nič kot napako in niz predloge kot ime datoteke. Niz predloge je sestavljen iz časovnega žiga, ustvarjenega s klicem Date.now() da zagotovite, da so imena slik vedno edinstvena, dva vezaja za ločevanje imena datoteke in časovnega žiga ter izvirno ime datoteke, do katerega lahko dostopate iz mapa predmet.
Nastali nizi iz te predloge bodo videti takole: 1663080276614--example.jpg.
Nato morate inicializirati multer z motorjem za shranjevanje.
Dodajte spodnji kodni blok svojemu app.js datoteka za inicializacijo multerja z mehanizmom za shranjevanje:
//inicializacija multerja
konst naloži = multer({
shranjevanje: storageEngine,
});
multer vrne instanco Multer, ki nudi več metod za generiranje vmesne programske opreme, ki obdeluje datoteke, naložene v multipart/form-data format.
V zgornjem bloku kode posredujete konfiguracijski objekt z a shranjevanje lastnost nastavljena na storageEngine, ki je mehanizem za shranjevanje, ki ste ga ustvarili prej.
Trenutno je vaša konfiguracija Multer dokončana, vendar ni nobenih pravil za preverjanje veljavnosti, ki bi zagotovila, da se na vaš strežnik lahko shranijo samo slike.
3. korak: Dodajanje pravil za preverjanje veljavnosti slike
Prvo pravilo preverjanja veljavnosti, ki ga lahko dodate, je največja dovoljena velikost slike, ki se naloži v vašo aplikacijo.
Posodobite svoj konfiguracijski objekt multer s spodnjim blokom kode:
konst naloži = multer({
shranjevanje: storageEngine,
omejitve: { velikost datoteke: 1000000 },
});
V zgornji blok kode ste dodali a omejitve lastnost konfiguracijskega objekta. Ta lastnost je objekt, ki določa različne omejitve vhodnih podatkov. Vi nastavite velikost datoteke lastnost, s katero je največja velikost datoteke v bajtih nastavljena na 1000000, kar je enako 1 MB.
Drugo pravilo preverjanja, ki ga lahko dodate, je fileFilter lastnost, izbirna funkcija za nadzor nad tem, katere datoteke so naložene. Ta funkcija se kliče za vsako datoteko, ki je obdelana. Ta funkcija ima enake parametre kot Ime datoteke funkcija: zahtevano, mapa, in cb.
Če želite, da bo vaša koda čistejša in bolj uporabna, boste abstrahirali vso logiko filtriranja v funkcijo.
Dodajte spodnji kodni blok svojemu app.js datoteko za implementacijo logike filtriranja datotek:
konst pot = zahtevati("pot");
konst checkFileType = funkcijo (datoteka, cb) {
//Dovoljene končnice datotek
konst Vrste datotek = /jpeg|jpg|png|gif|svg/;
//preverite razširitev imena
konst extName = fileTypes.test (path.extname (file.originalnaname).toLowerCase());
konst mimeType = fileTypes.test (file.mimetype);
če (mimeType && extName) {
vrnitev cb(nič, prav);
} drugače {
cb("Napaka: naložite lahko samo slike!!");
}
};
The preveriVrstoDatoteke funkcija ima dva parametra: mapa in cb.
V zgornjem kodnem bloku ste definirali a vrste datotek spremenljivka, ki shrani izraz regularnega izraza z dovoljenimi končnicami slikovnih datotek. Nato ste poklicali test metoda na izrazu regularnega izraza.
The test metoda preveri ujemanje v posredovanem nizu in vrne prav oz lažno odvisno od tega, ali najde ujemanje. Nato posredujete ime naložene datoteke, prek katere lahko dostopate file.originalnoname, v modul poti extname metoda, ki ji vrne razširitev poti niza. Nazadnje verižite JavaScript toLowerCase funkcijo niza v izraz za obdelavo slik z imeni razširitev v velikih črkah.
Samo preverjanje imena razširitve ni dovolj, saj je mogoče imena razširitev enostavno urejati. Če želite zagotoviti, da se nalagajo samo slike, morate preveriti Vrsta MIME preveč. Lahko dostopate do datotek mimetip lastnine prek file.mimetype. Torej preverite za mimetip lastnine z uporabo test način, kot ste to storili za imena razširitev.
Če oba pogoja vrneta true, vrnete povratni klic z nič in true ali vrnete povratni klic z napako.
Na koncu dodate še fileFilter lastnost vaše konfiguracije multiterja.
konst naloži = multer({
shranjevanje: storageEngine,
omejitve: { velikost datoteke: 10000000 },
fileFilter: (req, file, cb) => {
preveriFileType (datoteka, cb);
},
});
4. korak: Uporaba Multerja kot Express Middleware
Nato morate implementirati upravljalnike poti, ki bodo obravnavali nalaganje slik.
Multer lahko obravnava tako nalaganje ene kot več slik, odvisno od konfiguracije.
Dodajte spodnji kodni blok svojemu app.js datoteko za ustvarjanje upravljalnika poti za nalaganje posamezne slike:
app.post("/single", upload.single("slika"), (req, res) => {
če (zahtevano.mapa) {
res.send("Posamezna datoteka je bila uspešno naložena");
} drugače {
res.status (400).send("Naložite veljavno sliko");
}
});
V zgornjem kodnem bloku ste poklicali samski metoda na nalaganje spremenljivka, ki shranjuje vašo konfiguracijo multerja. Ta metoda vrne vmesno programsko opremo, ki obdeluje »eno datoteko«, povezano z danim poljem obrazca. Potem ste opravili slika kot polje obrazca.
Na koncu preverite, ali je bila datoteka naložena prek zahtevano objekt v mapa premoženje. Če je bil, pošljete sporočilo o uspehu, drugače pošljete sporočilo o napaki.
Dodajte spodnji kodni blok svojemu app.js datoteko za ustvarjanje upravljalnika poti za nalaganje več slik:
app.post("/multiple", upload.array("slike", 5), (req, res) => {
če (zahtevano.datoteke) {
res.send("Več datotek je bilo uspešno naloženih");
} drugače {
res.status (400).send("Naložite veljavne slike");
}
});
V zgornjem kodnem bloku ste poklicali niz metoda na nalaganje spremenljivka, ki shranjuje vašo konfiguracijo multerja. Ta metoda sprejme dva argumenta – ime polja in največje število – ter vrne vmesno programsko opremo, ki obdeluje več datotek z istim imenom polja. Potem si minil slike kot skupno polje obrazca in 5 kot največje število slik, ki jih je mogoče naložiti hkrati.
Prednosti uporabe Multerja
Uporaba Multerja v vaših aplikacijah Node.js poenostavi sicer zapleten postopek nalaganja in shranjevanja slik neposredno na vaš strežnik. Multer temelji tudi na busboyju, modulu Node.js za razčlenjevanje dohodnih podatkov obrazcev, zaradi česar je zelo učinkovit pri razčlenjevanju podatkov obrazcev.
