Node.js-is on failide üleslaadimiseks kolm peamist viisi: piltide salvestamine otse serverisse, pildi salvestamine binaarandmed või base64 stringiandmed oma andmebaasi ning Amazon Web Service (AWS) S3 ämbrite kasutamine oma salvestamiseks ja haldamiseks pilte.
Siit saate teada, kuidas kasutada Node.js vahevara Multerit piltide üleslaadimiseks ja salvestamiseks otse oma serverisse Node.js rakendustes mõne sammuga.
1. samm: arenduskeskkonna seadistamine
Selles projektis kasutatav kood on saadaval a GitHubi hoidla ja seda saate MIT-i litsentsi alusel tasuta kasutada.
Kõigepealt looge projekti kaust ja liikuge sellesse, käivitades järgmise käsu:
mkdir multi-õpetus
cd multi-õpetus
Järgmisena lähtestage npm oma projektikataloogis, käivitades:
npm init -y
Järgmisena peate installima mõned sõltuvused. Selle õpetuse jaoks vajalikud sõltuvused hõlmavad järgmist:
- Ekspress: Express on Node.js raamistik mis pakub veebi- ja mobiilirakenduste jaoks tugevat funktsioonide komplekti. See muudab Node.js-iga taustarakenduste loomise lihtsamaks.
- Multer: Multer on kiire vahevara, mis lihtsustab piltide üleslaadimist ja serverisse salvestamist.
Paigaldage paketid koos sõlme paketihaldur joostes:
npm installida ekspressmulter
Järgmisena looge an app.js faili oma projekti juurkataloogi ja lisage põhilise Expressi serveri loomiseks allolev koodiplokk:
//app.js
konst väljendada = nõuda('ekspress');
konst rakendus = express();
konst port = protsess.env. PORT || 3000;
app.listen (port, ()=>{
konsool.log(`Rakendus kuulab pordis ${port}`);
});
2. samm: Multeri konfigureerimine
Esiteks import multer sinus app.js faili.
konst multer = nõuda("multer");
multer nõuab salvestusmootorit, mis sisaldab teavet kataloogi kohta, kuhu üleslaaditud failid salvestatakse ja kuidas faile nimetatakse.
A multer salvestusmootor luuakse helistades kettasalvestus meetod imporditud multer moodul. See meetod tagastab a Salvestusmootor rakendus, mis on konfigureeritud failide salvestamiseks kohalikku failisüsteemi.
See võtab kahe omadusega konfiguratsiooniobjekti: sihtkoht, mis on string või funktsioon, mis määrab, kuhu üleslaaditud pildid salvestatakse.
Teine omadus, faili nimi, on funktsioon, mis määrab üleslaaditud failide nimed. Selleks on vaja kolme parameetrit: req, failija tagasihelistamine (cb). req on Express Taotlus objekt, faili on objekt, mis sisaldab teavet töödeldud faili kohta ja cb on tagasihelistamine, mis määrab üleslaaditud failide nimed. Tagasihelistamise funktsioon võtab argumentidena vea ja failinime.
Lisage allolev koodiplokk oma app.js faili salvestusmootori loomiseks:
//Salvestusmootori seadistamine
konst storageEngine = multer.diskStorage({
sihtkoht: "./pildid",
failinimi: (req, fail, cb) => {
cb(null, `${Kuupäev.now()}--${file.originalname}`);
},
});
Ülaltoodud koodiplokis määrate sihtkoht vara "./pildid”, seega salvestatakse pildid teie projekti kataloogi a pilte kausta. Siis tagasihelistamisel läksite null veana ja mallistringi failinimena. Malli string koosneb helistamise teel genereeritud ajatemplist Kuupäev.nüüd() tagamaks, et piltide nimed on alati kordumatud, kaks sidekriipsu, mis eraldavad failinime ja ajatempli ning faili algse nime, millele pääseb juurde faili objektiks.
Sellest mallist saadavad stringid näevad välja järgmised: 1663080276614--example.jpg.
Järgmisena peate lähtestama multer salvestusmootoriga.
Lisage allolev koodiplokk oma app.js fail multiri initsialiseerimiseks salvestusmootoriga:
//multeri initsialiseerimine
konst üleslaadimine = multer({
ladustamine: ladustamismootor,
});
multer tagastab Multeri eksemplari, mis pakub mitmeid meetodeid vahevara loomiseks, mis töötleb sisselaaditud faile mitmeosaline/vorm-andmed vormingus.
Ülaltoodud koodiplokis edastate konfiguratsiooniobjekti a-ga ladustamine vara määratud ladustamismootor, mis on varem loodud salvestusmootor.
Praegu on teie Multeri konfiguratsioon valmis, kuid puuduvad valideerimisreeglid, mis tagaksid, et teie serverisse saab salvestada ainult pilte.
3. samm: pildi kinnitamise reeglite lisamine
Esimene kinnitusreegel, mille saate lisada, on teie rakendusse üleslaaditava pildi maksimaalne lubatud suurus.
Värskendage oma multiri konfiguratsiooniobjekti alloleva koodiplokiga:
konst üleslaadimine = multer({
ladustamine: ladustamismootor,
piirid: { faili suurus: 1000000 },
});
Ülaltoodud koodiplokki lisasite a piirid konfiguratsiooniobjekti omadus. See atribuut on objekt, mis määrab sissetulevatele andmetele erinevad piirangud. Sina määrasid faili suurus atribuut, millega määratakse faili maksimaalne suurus baitides 1000000, mis võrdub 1 MB-ga.
Teine valideerimisreegel, mille saate lisada, on failifilter atribuut, valikuline funktsioon üleslaaditavate failide kontrollimiseks. Seda funktsiooni kutsutakse iga töödeldava faili jaoks. See funktsioon võtab samad parameetrid kui faili nimi funktsioon: req, faili, ja cb.
Koodi puhtamaks ja korduvkasutatavamaks muutmiseks ühendate kogu filtreerimisloogika funktsiooniks.
Lisage allolev koodiplokk oma app.js fail faili filtreerimise loogika rakendamiseks:
konst tee = nõuda("tee");
konst checkFileType = funktsiooni (fail, cb) {
//Lubatud faililaiendid
konst failitüübid = /jpeg|jpg|png|gif|svg/;
//Kontrollima pikendamine nimed
konst extName = failitüübid.test (tee.extnimi (faili algnimi).toLowerCase());
konst mimeType = failitüübid.test (file.mimetype);
if (mimeType && extName) {
tagasi cb(null, tõsi);
} muidu {
cb("Viga: saate üles laadida ainult pilte!!");
}
};
The kontrollige failitüüpi Funktsioon võtab kaks parameetrit: faili ja cb.
Ülaltoodud koodiplokis määratlesite a failitüübid muutuja, mis salvestab regex-avaldise lubatud pildifaililaienditega. Järgmiseks helistasite test meetodit regex-avaldises.
The test meetod kontrollib vastet läbitud stringis ja tagastab tõsi või vale sõltuvalt sellest, kas see leiab vaste. Seejärel edastate üleslaaditud faili nime, mille kaudu pääsete juurde fail.originaalnimi, tee moodulisse välisnimi meetod, mis tagastab sellele stringi tee laiendi. Lõpuks aheldate JavaScripti väiketähtedega string funktsiooni avaldisesse, et käsitleda pilte, mille laiendinimed on kirjutatud suurtähtedega.
Ainuüksi laienduse nime kontrollimisest ei piisa, sest laiendite nimesid on lihtne muuta. Ainult piltide üleslaadimise tagamiseks peate kontrollima MIME tüüp ka. Saate juurdepääsu failile mimetüüp vara kaudu file.mimetype. Niisiis, kontrollige, kas mimetüüp vara kasutades test meetodit, nagu tegite laiendite nimede puhul.
Kui kaks tingimust vastavad tõele, tagastate tagasihelistamise null ja tõene, või helistate tagasi veaga.
Lõpuks lisate failifilter oma multiri konfiguratsioonile.
konst üleslaadimine = multer({
ladustamine: ladustamismootor,
piirid: { faili suurus: 10000000 },
fileFilter: (req, file, cb) => {
checkFileType (fail, cb);
},
});
4. samm: Multeri kasutamine ekspress-vahevarana
Järgmisena peate rakendama marsruudihaldurid, mis tegelevad piltide üleslaadimisega.
Olenevalt konfiguratsioonist saab Multer hakkama nii ühe kui ka mitme pildi üleslaadimisega.
Lisage allolev koodiplokk oma app.js faili, et luua marsruudi töötleja ühe pildi üleslaadimiseks:
app.post("/single", upload.single("pilt"), (req, res) => {
kui (req.fail) {
res.send("Üks fail on edukalt üles laaditud");
} muidu {
res.status (400).send("Palun laadige üles kehtiv pilt");
}
});
Ülaltoodud koodiplokis helistasite vallaline meetodil Laadi üles muutuja, mis salvestab teie multeri konfiguratsiooni. See meetod tagastab vahevara, mis töötleb antud vormiväljaga seotud "üks faili". Seejärel läbisite pilt vormiväljana.
Lõpuks kontrollige, kas fail laaditi üles rakenduse kaudu req objektis faili vara. Kui see oli nii, saadate eduteate, vastasel juhul saadate veateate.
Lisage allolev koodiplokk oma app.js faili marsruudi töötleja loomiseks mitme pildi üleslaadimise jaoks:
app.post("/multiple", upload.array("pilte", 5), (req, res) => {
kui (req.failid) {
res.send("Mitu faili edukalt üles laaditud");
} muidu {
res.status (400).send("Palun laadige üles kehtivad pildid");
}
});
Ülaltoodud koodiplokis helistasite massiivi meetodil Laadi üles muutuja, mis salvestab teie multeri konfiguratsiooni. See meetod kasutab kahte argumenti – välja nime ja maksimaalset arvu – ning tagastab vahevara, mis töötleb mitut sama väljanime jagavat faili. Siis möödusid pilte jagatud vormiväljana ja 5 korraga üleslaaditavate piltide maksimaalse arvuna.
Multeri kasutamise eelised
Multeri kasutamine Node.js rakendustes lihtsustab muidu keerukat piltide otse serverisse üleslaadimise ja salvestamise protsessi. Multer põhineb ka busboy'l, Node.js moodulil sissetulevate vormiandmete sõelumiseks, muutes selle vormiandmete sõelumiseks väga tõhusaks.