Három fő módja van a Node.js fájlfeltöltéseinek kezelésének: a képek közvetlen mentése a szerverre, a kép mentése bináris adatok vagy base64 karakterlánc-adatok az adatbázisába, és az Amazon Web Service (AWS) S3 tárolók használatával mentheti és kezelheti képeket.

Itt megtudhatja, hogyan használhatja a Multert, egy Node.js köztes szoftvert, hogy néhány lépésben képeket tölthessen fel és mentsen közvetlenül a szerverére a Node.js alkalmazásokban.

1. lépés: Fejlesztési környezet beállítása

A projektben használt kód elérhető a GitHub adattár és az MIT licence alapján ingyenesen használható.

Először hozzon létre egy projekt mappát, és lépjen be a következő parancs futtatásával:

mkdir multi-oktatóanyag
CD multi-oktatóanyag

Ezután inicializálja az npm-et a projektkönyvtárban a következő futtatással:

npm init -y

Ezután telepítenie kell néhány függőséget. Az oktatóanyaghoz szükséges függőségek a következők:

  • Expressz: Az Express egy Node.js keretrendszer amely robusztus funkciókészletet biztosít webes és mobilalkalmazásokhoz. Könnyebbé teszi a háttéralkalmazások Node.js-szel való felépítését.
    • instagram viewer
  • Multer: A Multer egy expressz köztes szoftver, amely leegyszerűsíti a képek feltöltését és mentését a szerverre.

Telepítse a csomagokat a a csomóponti csomagkezelő futással:

npm telepítés expressz multer

Ezután hozzon létre egy app.js fájlt a projekt gyökérkönyvtárába, és adja hozzá az alábbi kódblokkot egy alapszintű Express szerver létrehozásához:

//app.js
const expressz = igényelnek('Expressz');
const app = express();
const port = process.env. PORT || 3000;
app.listen (port, ()=>{
konzol.log(`Az alkalmazás figyel a porton ${port}`);
});

2. lépés: A Multer konfigurálása

Először is, import multer a tiédben app.js fájlt.

const multer = igényelnek("multer");

multer tárolómotorra van szükség, amely információkat tartalmaz a feltöltött fájlok tárolási könyvtáráról és a fájlok elnevezéséről.

A multer tárolómotor létrehozása a diskStorage módszer az importálton multer modult. Ez a módszer visszaadja a Tárolómotor megvalósítás a fájlok helyi fájlrendszeren való tárolására van beállítva.

Két tulajdonsággal rendelkező konfigurációs objektumot vesz igénybe: rendeltetési hely, amely egy karakterlánc vagy függvény, amely meghatározza, hogy a feltöltött képek hol legyenek tárolva.

A második tulajdonság, fájl név, egy olyan funkció, amely meghatározza a feltöltött fájlok nevét. Három paraméter kell hozzá: req, fájlt, és egy visszahívás (cb). req az Expressz Kérés tárgy, fájlt egy objektum, amely információkat tartalmaz a feldolgozott fájlról, és cb egy visszahívás, amely meghatározza a feltöltött fájlok nevét. A visszahívási függvény a hibát és a fájlnevet veszi fel argumentumként.

Adja hozzá az alábbi kódblokkot a sajátjához app.js fájl a tárolómotor létrehozásához:

//Tárolómotor beállítása
const storageEngine = multer.diskStorage({
 rendeltetési hely: "./images",
 fájlnév: (req, file, cb) => {
 cb(nulla, `${Dátum.Most()}--${file.originalname}`);
 },
});

A fenti kódblokkban beállítja a rendeltetési hely tulajdon”./images”, így a képek a projekt könyvtárában lesznek tárolva egy képeket mappát. Aztán a visszahívásban átmentél nulla hibaként és egy sablon karakterláncot a fájlnévként. A sablon karakterlánc egy hívás által generált időbélyegből áll Dátum.most() hogy a képnevek mindig egyediek legyenek, két kötőjel választja el a fájlnevet és az időbélyeget, valamint a fájl eredeti nevét, amely a fájlt tárgy.

Az ebből a sablonból származó karakterláncok így fognak kinézni: 1663080276614--example.jpg.

Ezután inicializálnia kell multer a tárolómotorral.

Adja hozzá az alábbi kódblokkot a sajátjához app.js fájl a multer inicializálásához a tárolómotorral:

//multer inicializálása
const feltöltés = multer({
 tárolás: storageEngine,
});

multer egy Multer példányt ad vissza, amely számos módszert biztosít a feltöltött fájlokat feldolgozó köztes szoftver előállításához többrészes/forma-adatok formátum.

A fenti kódblokkban egy konfigurációs objektumot ad át a-val tárolás tulajdonság beállítva tárolómotor, amely a korábban létrehozott tárolómotor.

Jelenleg a Multer konfigurációja kész, de nincsenek érvényesítési szabályok, amelyek biztosítanák, hogy csak képek menthetők a szerverre.

3. lépés: Képérvényesítési szabályok hozzáadása

Az első hozzáadható érvényesítési szabály az alkalmazásba feltölthető kép maximális mérete.

Frissítse a multer konfigurációs objektumát az alábbi kódblokk segítségével:

const feltöltés = multer({
 tárolás: storageEngine,
határait: { fájl méret: 1000000 },
});

A fenti kódblokkban hozzáadta a határait tulajdonság a konfigurációs objektumhoz. Ez a tulajdonság egy olyan objektum, amely különböző korlátozásokat határoz meg a bejövő adatokra vonatkozóan. Beállítod a fájl méret tulajdonság, amellyel a maximális fájlméret bájtban be van állítva 1000000, ami 1 MB-nak felel meg.

Egy másik érvényesítési szabály, amelyet hozzáadhat, a fájlszűrő tulajdonság, egy opcionális funkció a feltöltött fájlok szabályozására. Ez a függvény minden feldolgozott fájlhoz meghívásra kerül. Ez a függvény ugyanazokat a paramétereket veszi fel, mint a fájl név funkció: req, fájlt, és cb.

A kód tisztábbá és újrafelhasználhatóbbá tétele érdekében az összes szűrési logikát függvénybe kell vonni.

Adja hozzá az alábbi kódblokkot a sajátjához app.js fájl a fájlszűrési logika megvalósításához:

const útvonal = igényelnek("pálya");
const checkFileType = funkció (fájl, cb) {
//Engedélyezett fájlkiterjesztések
const fájltípusok = /jpeg|jpg|png|gif|svg/;
 //jelölje be kiterjesztés neveket
const extName = fájltípusok.teszt (elérési út.kiegészítőnév (fájl.eredetinév).ToLowerCase());
const mimeType = fileTypes.test (file.mimetype);
 if (mimeType && extName) {
Visszatérés cb(nulla, igaz);
 } más {
 cb("Hiba: Csak képeket tölthet fel!!");
 }
};

A ellenőrizze a fájltípust A funkciónak két paramétere van: fájlt és cb.

A fenti kódblokkban meghatározta a fájl típusok változó, amely egy regex kifejezést tárol a megengedett képfájl-kiterjesztésekkel. Ezután felhívtad a teszt módszer a regex kifejezésen.

A teszt A metódus egyezést keres az átadott karakterláncban, és visszatér igaz vagy hamis attól függően, hogy talál-e egyezést. Ezután átadja a feltöltött fájl nevét, amelyen keresztül hozzáférhet fájl.eredetinév, az elérési út moduljába extname metódust, amely visszaadja neki a karakterlánc elérési útjának kiterjesztését. Végül láncolja a JavaScriptet to LowCase string függvényt a kifejezéshez, hogy kezelje a nagybetűs kiterjesztésű képeket.

A kiterjesztés nevének ellenőrzése önmagában nem elegendő, mivel a melléknevek könnyen szerkeszthetők. Annak érdekében, hogy csak képeket töltsenek fel, ellenőriznie kell a MIME típus is. Hozzáférhet egy fájlhoz mimetípus ingatlan révén a file.mimetype. Tehát ellenőrizze a mimetípus ingatlan segítségével a teszt módszert, ahogyan a kiterjesztésneveknél tetted.

Ha a két feltétel igaz, akkor a visszahívást a következővel téríti vissza nulla és igaz, vagy hibával küldi vissza a visszahívást.

Végül hozzáadja a fájlszűrő tulajdonságot a multer konfigurációjához.

const feltöltés = multer({
 tárolás: storageEngine,
határait: { fájl méret: 10000000 },
 fileFilter: (req, file, cb) => {
 checkFileType (fájl, cb);
 },
});

4. lépés: A Multer használata expressz köztes szoftverként

Ezután olyan útvonalkezelőket kell megvalósítania, amelyek kezelik a képfeltöltéseket.

A Multer a konfigurációtól függően egy- és több képfeltöltést is képes kezelni.

Adja hozzá az alábbi kódblokkot a sajátjához app.js fájl útvonalkezelő létrehozásához egyetlen kép feltöltéséhez:

app.post("/single", upload.single("kép"), (req, res) => {
ha (req.fájl) {
 res.send("Egyetlen fájl sikeresen feltöltve");
 } más {
 res.status (400).send("Kérjük, töltsön fel egy érvényes képet");
 }
});

A fenti kódblokkban a egyetlen módszer a feltölteni változó, amely a multer konfigurációját tárolja. Ez a módszer egy köztes szoftvert ad vissza, amely az adott űrlapmezőhöz társított „egyetlen fájlt” dolgoz fel. Aztán átmentél a kép mint az űrlapmező.

Végül ellenőrizze, hogy feltöltött-e egy fájlt a req objektum a fájlt ingatlan. Ha igen, akkor sikerüzenetet küld, ellenkező esetben hibaüzenetet küld.

Adja hozzá az alábbi kódblokkot a sajátjához app.js fájl útvonalkezelő létrehozásához több képfeltöltéshez:

app.post("/multiple", upload.array("képeket", 5), (req, res) => {
ha (req.fájlok) {
 res.send("Több fájl sikeresen feltöltve");
 } más {
 res.status (400).send("Kérjük, töltsön fel érvényes képet");
 }
});

A fenti kódblokkban a sor módszer a feltölteni változó, amely a multer konfigurációját tárolja. Ez a metódus két argumentumot vesz fel – egy mezőnevet és egy maximális számot –, és olyan köztes szoftvert ad vissza, amely több, ugyanazon a mezőneven osztozó fájlt dolgoz fel. Aztán átmentél képeket mint a megosztott űrlapmező és 5, mint az egyszerre feltölthető képek maximális száma.

A Multer használatának előnyei

A Multer használata a Node.js alkalmazásaiban leegyszerűsíti a képek közvetlenül a szerverre való feltöltésének és mentésének egyébként bonyolult folyamatát. A Multer a busboy-on is alapul, egy Node.js modulon a bejövő űrlapadatok elemzésére, így nagyon hatékony az űrlapadatok elemzésére.