Postoje tri glavna načina rukovanja učitavanjem datoteka u Node.js: spremanje slika izravno na vaš poslužitelj, spremanje slika binarne podatke ili base64 niz podataka u vašu bazu podataka i korištenje Amazon Web Service (AWS) S3 spremnika za spremanje i upravljanje vašim slike.
Ovdje ćete naučiti kako koristiti Multer, međuprogram Node.js, za prijenos i spremanje slika izravno na vaš poslužitelj u Node.js aplikacijama u nekoliko koraka.
Korak 1: Postavljanje razvojnog okruženja
Kod korišten u ovom projektu dostupan je u a GitHub spremište i besplatan je za korištenje pod MIT licencom.
Najprije stvorite mapu projekta i prijeđite u nju izvođenjem sljedeće naredbe:
mkdir multi-tutorial
CD multi-tutorial
Zatim inicijalizirajte npm u direktoriju vašeg projekta pokretanjem:
npm init -y
Zatim ćete morati instalirati neke ovisnosti. Zavisnosti potrebne za ovaj vodič uključuju:
- Izraziti: Express je okvir Node.js koji pruža robustan skup značajki za web i mobilne aplikacije. Olakšava izradu pozadinskih aplikacija s Node.js.
- Multer: Multer je ekspresni međuware koji pojednostavljuje učitavanje i spremanje slika na vaš poslužitelj.
Instalirajte pakete sa upravitelj paketa čvora trčanjem:
npm instalirati izraziti multer
Zatim izradite app.js datoteku u korijenskom direktoriju vašeg projekta i dodajte blok koda u nastavku da biste stvorili osnovni Express poslužitelj:
//app.js
konst izraziti = zahtijevati('izraziti');
konst app = express();
konst luka = proces.env. LUKA || 3000;
app.listen (port, ()=>{
konzola.log(`Aplikacija sluša priključak ${port}`);
});
Korak 2: Konfiguriranje Multera
Prvo, uvoz multer u vašem app.js datoteka.
konst multer = zahtijevati("multer");
multer zahtijeva mehanizam za pohranjivanje podataka koji sadrži informacije o direktoriju u koji će učitane datoteke biti pohranjene i kako će datoteke biti imenovane.
A multer mehanizam za pohranu se stvara pozivom diskStorage metoda na uvezenom multer modul. Ova metoda vraća a StorageEngine implementacija konfigurirana za pohranjivanje datoteka na lokalnom datotečnom sustavu.
Potreban je konfiguracijski objekt s dva svojstva: odredište, što je niz ili funkcija koja određuje gdje će se učitane slike pohraniti.
Drugo svojstvo, naziv datoteke, je funkcija koja određuje nazive učitanih datoteka. Potrebna su tri parametra: zahtijevati, datoteka, i povratni poziv (cb). zahtijevati je Express Zahtjev objekt, datoteka je objekt koji sadrži informacije o obrađenoj datoteci, i cb je povratni poziv koji određuje nazive učitanih datoteka. Funkcija povratnog poziva uzima pogrešku i naziv datoteke kao argumente.
Dodajte blok koda u nastavku u svoj app.js datoteka za stvaranje mehanizma za pohranu:
//Postavljanje mehanizma za pohranu
konst storageEngine = multer.diskStorage({
odredište: "./slike",
naziv datoteke: (req, datoteka, cb) => {
cb(ništavan, `${Datum.sada()}--${file.originalni naziv}`);
},
});
U gornjem bloku koda postavljate odredište vlasništvo za ”./slike“, stoga će slike biti pohranjene u direktoriju vašeg projekta u an slike mapa. Zatim ste prošli u povratnom pozivu ništavan kao pogrešku i niz predloška kao naziv datoteke. Niz predloška sastoji se od vremenske oznake generirane pozivom Date.now() kako bi se osiguralo da su nazivi slika uvijek jedinstveni, dvije crtice za odvajanje naziva datoteke i vremenske oznake te izvorni naziv datoteke kojem se može pristupiti iz datoteka objekt.
Rezultirajući nizovi iz ovog predloška izgledat će ovako: 1663080276614--example.jpg.
Zatim morate inicijalizirati multer s motorom za pohranu.
Dodajte blok koda u nastavku u svoj app.js datoteka za inicijalizaciju multera s motorom za pohranu:
//inicijaliziranje multera
konst upload = multi({
pohrana: storageEngine,
});
multer vraća Multer instancu koja pruža nekoliko metoda za generiranje međusoftvera koji obrađuje datoteke učitane u multipart/form-data format.
U gornjem bloku koda prosljeđujete konfiguracijski objekt s a skladištenje svojstvo postavljeno na storageEngine, koji je mehanizam za pohranu koji ste ranije stvorili.
Trenutačno je vaša Multer konfiguracija dovršena, ali ne postoje pravila provjere valjanosti koja osiguravaju da se samo slike mogu spremiti na vaš poslužitelj.
Korak 3: Dodavanje pravila za provjeru valjanosti slike
Prvo pravilo provjere valjanosti koje možete dodati je maksimalna dopuštena veličina slike za učitavanje u vašu aplikaciju.
Ažurirajte svoj multimedijski konfiguracijski objekt s donjim blokom koda:
konst upload = multi({
pohrana: storageEngine,
granice: { veličina datoteke: 1000000 },
});
U gornjem bloku koda dodali ste a granice svojstvo konfiguracijskog objekta. Ovo svojstvo je objekt koji specificira različita ograničenja dolaznih podataka. Vi postavite veličina datoteke svojstvo, s kojim je maksimalna veličina datoteke u bajtovima postavljena na 1000000, što je ekvivalentno 1 MB.
Još jedno pravilo provjere valjanosti koje možete dodati je FileFilter svojstvo, izborna funkcija za kontrolu koje se datoteke učitavaju. Ova se funkcija poziva za svaku datoteku koja se obrađuje. Ova funkcija uzima iste parametre kao i naziv datoteke funkcija: zahtijevati, datoteka, i cb.
Kako bi vaš kod bio čišći i višekratno upotrebljiv, apstrahirati ćete svu logiku filtriranja u funkciju.
Dodajte blok koda u nastavku u svoj app.js datoteka za implementaciju logike filtriranja datoteka:
konst put = zahtijevati("staza");
konst provjeriVrstaDatoteke = funkcija (datoteka, cb) {
//Dopuštene ekstenzije datoteka
konst Vrste datoteka = /jpeg|jpg|png|gif|svg/;
//ček proširenje imena
konst extName = fileTypes.test (path.extname (file.originalniname).toLowerCase());
konst mimeType = FileTypes.test (file.mimetype);
ako (mimeType && extName) {
povratak cb(ništavan, pravi);
} drugo {
cb("Greška: možete postavljati samo slike!!");
}
};
The provjeriVrstaDatoteke funkcija ima dva parametra: datoteka i cb.
U gornjem bloku koda definirali ste a vrste datoteka varijabla koja pohranjuje regex izraz s dopuštenim ekstenzijama datoteke slike. Zatim ste pozvali test metoda na regularnom izrazu.
The test metoda provjerava podudaranje u proslijeđenom nizu i vraća pravi ili lažno ovisno o tome hoće li pronaći podudarnost. Zatim prosljeđujete naziv učitane datoteke preko koje možete pristupiti datoteka.izvorni naziv, u modul staze extname metoda, koja mu vraća proširenje staze niza. Na kraju, ulančavate JavaScript malim slovima funkciju niza izrazu za rukovanje slikama s njihovim nazivima proširenja velikim slovima.
Samo provjeravanje naziva proširenja nije dovoljno jer se nazivi proširenja mogu lako uređivati. Kako biste bili sigurni da se učitavaju samo slike, morate provjeriti MIME vrsta isto. Možete pristupiti datoteci mimetip vlasništvo kroz datoteka.mimetip. Dakle, provjerite za mimetip vlasništvo koristeći test način kao što ste učinili za nazive proširenja.
Ako dva uvjeta vrate true, vraćate povratni poziv s ništavan i true, ili vraćate povratni poziv s pogreškom.
Na kraju dodajete FileFilter svojstvo vašoj konfiguraciji multimedije.
konst upload = multi({
pohrana: storageEngine,
granice: { veličina datoteke: 10000000 },
fileFilter: (req, file, cb) => {
provjeriteFileType (datoteka, cb);
},
});
Korak 4: Korištenje Multera kao Express Middleware-a
Zatim morate implementirati rukovatelje rutama koji će rukovati učitavanjem slika.
Multer može podnijeti učitavanje jedne i više slika, ovisno o konfiguraciji.
Dodajte blok koda u nastavku u svoj app.js datoteku za stvaranje rukovatelja rutom za učitavanje pojedinačne slike:
app.post("/single", upload.single("slika"), (req, res) => {
ako (zahtijevati.datoteka) {
res.send("Jedna datoteka je uspješno učitana");
} drugo {
res.status (400).send("Učitajte valjanu sliku");
}
});
U gornjem bloku koda pozvali ste singl metoda na Učitaj varijabla, koja pohranjuje vašu konfiguraciju multera. Ova metoda vraća međuprogram koji obrađuje "jednu datoteku" povezanu s danim poljem obrasca. Zatim ste položili slika kao polje obrasca.
Na kraju provjerite je li datoteka učitana putem zahtijevati objekt u datoteka vlasništvo. Ako jest, šaljete poruku o uspjehu, inače šaljete poruku o pogrešci.
Dodajte blok koda u nastavku u svoj app.js datoteku za stvaranje rukovatelja rutom za više učitavanja slika:
app.post("/multiple", upload.array("slike", 5), (req, res) => {
ako (zahtijevati.datoteke) {
res.send("Uspješno je preneseno više datoteka");
} drugo {
res.status (400).send("Učitajte važeće slike");
}
});
U gornjem bloku koda pozvali ste niz metoda na Učitaj varijabla, koja pohranjuje vašu konfiguraciju multera. Ova metoda uzima dva argumenta—naziv polja i maksimalni broj—i vraća međuprogram koji obrađuje više datoteka koje dijele isti naziv polja. Zatim, prošao si slike kao zajedničko polje obrasca i 5 kao najveći broj slika koje se mogu učitati odjednom.
Prednosti korištenja Multera
Korištenje Multera u vašim Node.js aplikacijama pojednostavljuje inače kompliciran proces učitavanja i spremanja slika izravno na vaš poslužitelj. Multer se također temelji na busboyu, Node.js modulu za raščlanjivanje dolaznih podataka obrazaca, što ga čini vrlo učinkovitim za raščlanjivanje podataka obrazaca.
