Node.js: ssä on kolme päätapaa käsitellä tiedostojen latauksia: kuvien tallentaminen suoraan palvelimellesi, kuvan tallentaminen binaaridataa tai base64-merkkijonotietoja tietokantaasi ja käyttämällä Amazon Web Service (AWS) S3-säihöitä tallentaaksesi ja hallitaksesi kuvia.

Täällä opit käyttämään Multeria, Node.js-väliohjelmistoa, kuvien lataamiseen ja tallentamiseen suoraan palvelimellesi Node.js-sovelluksissa muutamassa vaiheessa.

Vaihe 1: Kehitysympäristön määrittäminen

Tässä projektissa käytetty koodi on saatavilla a GitHub-arkisto ja sen käyttö on ilmaista MIT-lisenssin alaisena.

Luo ensin projektikansio ja siirry siihen suorittamalla seuraava komento:

mkdir multi-opetusohjelma
CD monipuolinen opetusohjelma

Alusta seuraavaksi npm projektihakemistossasi suorittamalla:

npm init -y

Seuraavaksi sinun on asennettava joitain riippuvuuksia. Tässä opetusohjelmassa vaadittavia riippuvuuksia ovat:

  • Ilmaista: Express on Node.js-kehys joka tarjoaa vankan joukon ominaisuuksia verkko- ja mobiilisovelluksiin. Se helpottaa taustasovellusten rakentamista Node.js: n avulla.
    • instagram viewer
  • Multer: Multer on nopea väliohjelmisto, joka yksinkertaistaa kuvien lataamista ja tallentamista palvelimellesi.

Asenna paketit kanssa solmun pakettien hallinta juoksemalla:

npm Asentaa express multer

Luo seuraavaksi an app.js tiedosto projektisi juurihakemistoon ja lisää alla oleva koodilohko luodaksesi perus Express-palvelimen:

//app.js
konst express = vaatia('ilmaista');
konst sovellus = express();
konst portti = process.env. SATAMA || 3000;
app.listen (portti, ()=>{
konsoli.Hirsi(`Sovellus kuuntelee porttia ${port}`);
});

Vaihe 2: Määritä Multer

Ensin tuonti multer sinun app.js tiedosto.

konst multeri = vaatia("multeri");

multer vaatii tallennuskoneen, joka sisältää tiedot hakemistosta, johon ladatut tiedostot tallennetaan ja kuinka tiedostot nimetään.

A multer tallennusmoottori luodaan soittamalla levymuisti menetelmä tuodulla multer moduuli. Tämä menetelmä palauttaa a Varastointimoottori toteutus on määritetty tallentamaan tiedostoja paikalliseen tiedostojärjestelmään.

Se vaatii konfigurointiobjektin, jolla on kaksi ominaisuutta: määränpäähän, joka on merkkijono tai funktio, joka määrittää, mihin ladatut kuvat tallennetaan.

Toinen ominaisuus, Tiedoston nimi, on toiminto, joka määrittää ladattujen tiedostojen nimet. Se vaatii kolme parametria: req, tiedostoja takaisinsoitto (cb). req on Express Pyyntö esine, tiedosto on objekti, joka sisältää tietoja käsitellystä tiedostosta, ja cb on takaisinsoitto, joka määrittää ladattujen tiedostojen nimet. Takaisinsoittotoiminto ottaa virheen ja tiedostonimen argumentteina.

Lisää alla oleva koodilohko omaan app.js tiedosto tallennusmoottorin luomiseksi:

//Asetetaan tallennusmoottoria
konst storageEngine = multer.diskStorage({
 määränpää: "./kuvat",
 tiedostonimi: (req, file, cb) => {
 cb(tyhjä, `${Päivämäärä.nyt()}--${file.originalname}`);
 },
});

Yllä olevassa koodilohkossa määrität määränpäähän omaisuutta”./kuvat", joten kuvat tallennetaan projektisi hakemistoon kuvia kansio. Sitten soittopyynnössä läpäisit tyhjä virheenä ja mallimerkkijono tiedostonimenä. Mallimerkkijono koostuu kutsumalla luodusta aikaleimasta Päivämäärä.nyt() varmistaaksesi, että kuvien nimet ovat aina yksilöllisiä, kaksi väliviivaa erottamaan tiedostonimen ja aikaleiman sekä tiedoston alkuperäisen nimen, johon pääsee käsiksi tiedosto esine.

Tästä mallista saadut merkkijonot näyttävät tältä: 1663080276614--esimerkki.jpg.

Seuraavaksi sinun on alustettava multer varastomoottorin kanssa.

Lisää alla oleva koodilohko omaan app.js tiedosto multirin alustamiseksi tallennusmoottorilla:

//alustetaan multeria
konst lataus = multer({
 varastointi: varastomoottori,
});

multer palauttaa Multer-esiintymän, joka tarjoaa useita tapoja luoda väliohjelmistoja, jotka käsittelevät sisään ladattuja tiedostoja moniosainen/lomake-data muoto.

Yllä olevassa koodilohkossa ohitat konfigurointiobjektin a: lla varastointi ominaisuus asetettu varastointimoottori, joka on aiemmin luomasi tallennusmoottori.

Tällä hetkellä Multer-kokoonpanosi on valmis, mutta ei ole olemassa vahvistussääntöjä, jotka varmistaisivat, että vain kuvia voidaan tallentaa palvelimellesi.

Vaihe 3: Lisää kuvan vahvistussääntöjä

Ensimmäinen lisättävä vahvistussääntö on sovellukseesi ladattavan kuvan enimmäiskoko.

Päivitä multirin määritysobjekti alla olevalla koodilohkolla:

konst lataus = multer({
 varastointi: varastomoottori,
rajoja: { Tiedoston koko: 1000000 },
});

Yllä olevaan koodilohkoon lisäsit a rajoja ominaisuus konfigurointiobjektiin. Tämä ominaisuus on objekti, joka määrittää erilaisia ​​rajoituksia saapuville tiedoille. Sinä asetat Tiedoston koko -ominaisuus, jolla asetetaan tiedoston enimmäiskoko tavuina 1000000, joka vastaa 1 Mt.

Toinen vahvistussääntö, jonka voit lisätä, on tiedostosuodatin ominaisuus, valinnainen toiminto, jolla ohjataan, mitkä tiedostot ladataan. Tätä toimintoa kutsutaan jokaiselle käsiteltävälle tiedostolle. Tämä toiminto ottaa samat parametrit kuin Tiedoston nimi toiminto: req, tiedosto, ja cb.

Tee koodistasi selkeämpi ja uudelleenkäytettävämpi abstrakti suodatuslogiikka funktioksi.

Lisää alla oleva koodilohko omaan app.js tiedosto tiedostojen suodatuslogiikan toteuttamiseksi:

konst polku = vaatia("polku");
konst checkFileType = toiminto (tiedosto, cb) {
//Sallitut tiedostopäätteet
konst tiedostotyypit = /jpeg|jpg|png|gif|svg/;
 //tarkistaa laajennus nimet
konst extName = tiedostotyypit.testi (polku.extname (tiedoston.alkuperäinennimi).pienikirjain());
konst mimeType = tiedostotyypit.testi (tiedosto.mimetyyppi);
 if (mimeType && extName) {
palata cb(tyhjä, totta);
 } muu {
 cb("Virhe: Voit ladata vain kuvia!!");
 }
};

The tarkista Tiedostotyyppi funktio ottaa kaksi parametria: tiedosto ja cb.

Yllä olevassa koodilohkossa määritit a tiedostotyypit muuttuja, joka tallentaa regex-lausekkeen sallituilla kuvatiedostotunnisteilla. Seuraavaksi soitit testata menetelmä säännöllisen lausekkeen kohdalla.

The testata menetelmä tarkistaa, löytyykö välitetty merkkijono vastaavuutta ja palauttaa totta tai väärä riippuen siitä löytääkö se ottelun. Sitten annat ladatun tiedoston nimen, jonka kautta pääset käsiksi tiedosto.alkuperäinennimi, polun moduuliin ulkonimi menetelmä, joka palauttaa siihen merkkijonopolun laajennuksen. Lopuksi ketjutat JavaScriptin pienellä kirjaimella merkkijono-funktio lausekkeeseen käsitelläksesi kuvia, joiden laajennusnimet ovat isoilla kirjaimilla.

Pelkästään laajennuksen nimen tarkistaminen ei riitä, sillä alatunnisteiden nimiä on helppo muokata. Varmistaaksesi, että vain kuvia ladataan, sinun on tarkistettava MIME-tyyppi liian. Voit käyttää tiedostoa mime-tyyppi omaisuutta kautta tiedosto.mimetyyppi. Joten tarkista mime-tyyppi omaisuutta käyttämällä testata menetelmällä, kuten teit laajennusnimille.

Jos kaksi ehtoa palautuvat tosi, palautat takaisinsoiton kanssa tyhjä ja tosi, tai palautat takaisinsoiton virheellä.

Lopuksi lisäät tiedostosuodatin ominaisuus monitoimikokoonpanoosi.

konst lataus = multer({
 varastointi: varastomoottori,
rajoja: { Tiedoston koko: 10000000 },
 fileFilter: (req, file, cb) => {
 checkFileType (tiedosto, cb);
 },
});

Vaihe 4: Käytä Multerin pikaväliohjelmistona

Seuraavaksi sinun on otettava käyttöön reitinkäsittelijät, jotka käsittelevät kuvien lataukset.

Multer pystyy käsittelemään sekä yhden että useamman kuvan latauksen kokoonpanosta riippuen.

Lisää alla oleva koodilohko omaan app.js tiedosto reitinkäsittelijän luomiseksi yksittäisten kuvien latauksille:

app.post("/single", upload.single("kuva"), (req, res) => {
jos (req.tiedosto) {
 res.send("Yksittäinen tiedosto lähetetty onnistuneesti");
 } muu {
 res.status (400).send("Lataa kelvollinen kuva");
 }
});

Yllä olevassa koodilohkossa soitit yksittäinen menetelmällä lataa muuttuja, joka tallentaa monitoimikokoonpanosi. Tämä menetelmä palauttaa väliohjelmiston, joka käsittelee "yksittäisen tiedoston", joka liittyy annettuun lomakekenttään. Sitten läpäisit kuva lomakekenttänä.

Tarkista lopuksi, onko tiedosto ladattu req esine tiedosto omaisuutta. Jos oli, lähetät onnistumisviestin, muuten lähetät virheilmoituksen.

Lisää alla oleva koodilohko omaan app.js tiedosto reitinkäsittelijän luomiseksi useille kuvien latauksille:

app.post("/multiple", upload.array("kuvia", 5), (req, res) => {
jos (req.tiedostot) {
 res.send("Useita tiedostoja lähetetty onnistuneesti");
 } muu {
 res.status (400).send("Lataa kelvolliset kuvat");
 }
});

Yllä olevassa koodilohkossa soitit joukko menetelmällä lataa muuttuja, joka tallentaa monitoimikokoonpanosi. Tämä menetelmä ottaa kaksi argumenttia – kentän nimen ja enimmäismäärän – ja palauttaa väliohjelmiston, joka käsittelee useita tiedostoja, joilla on sama kentän nimi. Sitten läpäisit kuvia jaettuna lomakekenttänä ja 5 kerrallaan ladattavien kuvien enimmäismääränä.

Multerin käytön edut

Multerin käyttäminen Node.js-sovelluksissa yksinkertaistaa muuten monimutkaista kuvien lataamista ja tallentamista suoraan palvelimellesi. Multer perustuu myös busboyyn, Node.js-moduuliin saapuvien lomaketietojen jäsentämiseen, mikä tekee siitä erittäin tehokkaan lomaketietojen jäsentämiseen.