Există trei moduri principale de a gestiona încărcările de fișiere în Node.js: salvarea imaginilor direct pe server, salvarea imaginii date binare sau date șir de bază 64 în baza de date și folosind compartimentele S3 Amazon Web Service (AWS) pentru a salva și gestiona imagini.

Aici veți învăța cum să utilizați Multer, un middleware Node.js, pentru a încărca și salva imagini direct pe serverul dvs. în aplicațiile Node.js în câțiva pași.

Pasul 1: Configurarea mediului de dezvoltare

Codul folosit în acest proiect este disponibil în a Depozitul GitHub și este gratuit pentru utilizare sub licența MIT.

Mai întâi, creați un folder de proiect și treceți în el executând următoarea comandă:

mkdir multer-tutorial
CD multer-tutorial

Apoi, inițializați npm în directorul de proiect rulând:

npm init -y

În continuare, va trebui să instalați unele dependențe. Dependențele necesare pentru acest tutorial includ:

  • Expres: Express este un cadru Node.js care oferă un set robust de caracteristici pentru aplicații web și mobile. Face mai ușor să construiți aplicații backend cu Node.js.
    • instagram viewer
  • Multer: Multer este un middleware expres care simplifică încărcarea și salvarea imaginilor pe server.

Instalați pachetele cu managerul de pachete nod rulând:

npm instalare expres multer

Apoi, creați un app.js fișier în directorul rădăcină al proiectului și adăugați blocul de cod de mai jos pentru a crea un server Express de bază:

//app.js
const expres = cere('expres');
const aplicație = expres();
const port = process.env. PORT || 3000;
app.listen (port, ()=>{
consolă.Buturuga(`Aplicația ascultă pe port ${port}`);
});

Pasul 2: Configurarea Multer

În primul rând, import multer în dumneavoastră app.js fişier.

const multer = cere(„multer”);

multer necesită un motor de stocare care conține informații despre directorul în care vor fi stocate fișierele încărcate și despre cum vor fi denumite fișierele.

A multer motorul de stocare este creat prin apelarea stocare pe disc metoda pe cele importate multer modul. Această metodă returnează a StorageEngine implementare configurată pentru a stoca fișiere pe sistemul de fișiere local.

Este nevoie de un obiect de configurare cu două proprietăți: destinaţie, care este un șir sau o funcție care specifică unde vor fi stocate imaginile încărcate.

A doua proprietate, nume de fișier, este o funcție care determină numele fișierelor încărcate. Este nevoie de trei parametri: solicitat, fişier, și un apel invers (cb). solicitat este expresul Cerere obiect, fişier este un obiect care conține informații despre fișierul procesat și cb este un apel invers care determină numele fișierelor încărcate. Funcția de apel invers ia ca argumente eroarea și numele fișierului.

Adăugați blocul de cod de mai jos la dvs app.js fișier pentru a crea un motor de stocare:

//Setarea motorului de stocare
const storageEngine = multer.diskStorage({
 destinaţie: "./imagini",
 nume de fișier: (req, file, cb) => {
 cb(nul, `${Data.acum()}--${file.originalname}`);
 },
});

În blocul de cod de mai sus, setați destinaţie proprietate la”./imagini”, astfel, imaginile vor fi stocate în directorul proiectului dvs. într-un imagini pliant. Apoi, la apel invers, ai trecut nul ca eroare și un șir de șablon ca nume de fișier. Șirul de șablon constă dintr-un marcaj de timp generat prin apelare Data.now() pentru a vă asigura că numele imaginilor sunt întotdeauna unice, două cratime pentru a separa numele fișierului și marca temporală și numele original al fișierului, care poate fi accesat din fişier obiect.

Șirurile rezultate din acest șablon vor arăta astfel: 1663080276614--exemplu.jpg.

Apoi, trebuie să inițializați multer cu motorul de stocare.

Adăugați blocul de cod de mai jos la dvs app.js fișier pentru a inițializa multer cu motorul de stocare:

//inițializarea multer
const upload = multer({
 stocare: stocareMotor,
});

multer returnează o instanță Multer care oferă mai multe metode pentru generarea de middleware care procesează fișierele încărcate în multipart/form-data format.

În blocul de cod de mai sus, treceți un obiect de configurare cu a depozitare proprietate setată la stocareMotor, care este motorul de stocare pe care l-ați creat mai devreme.

În prezent, configurația dvs. Multer este completă, dar nu există reguli de validare care să asigure că numai imaginile pot fi salvate pe serverul dvs.

Pasul 3: Adăugarea regulilor de validare a imaginii

Prima regulă de validare pe care o puteți adăuga este dimensiunea maximă permisă pentru ca o imagine să fie încărcată în aplicația dvs.

Actualizați obiectul de configurare multer cu blocul de cod de mai jos:

const upload = multer({
 stocare: stocareMotor,
limite: { mărime fișier: 1000000 },
});

În blocul de cod de mai sus, ați adăugat un limite proprietate la obiectul de configurare. Această proprietate este un obiect care specifică diferite limite ale datelor primite. Tu ai setat mărime fișier proprietate, cu care este setată dimensiunea maximă a fișierului în octeți 1000000, care este echivalent cu 1 MB.

O altă regulă de validare pe care o puteți adăuga este fileFilter proprietate, o funcție opțională pentru a controla ce fișiere sunt încărcate. Această funcție este apelată pentru fiecare fișier care este procesat. Această funcție preia aceiași parametri ca și nume de fișier funcţie: solicitat, fişier, și cb.

Pentru a face codul mai curat și mai reutilizabil, veți abstrage toată logica de filtrare într-o funcție.

Adăugați blocul de cod de mai jos la dvs app.js fișier pentru a implementa logica de filtrare a fișierelor:

const cale = cere("cale");
const checkFileType = funcţie (dosar, cb) {
//Extensii de fișiere permise
const fileTypes = /jpeg|jpg|png|gif|svg/;
 //Verifica extensie nume
const extName = fileTypes.test (path.extname (file.originalname).toLowerCase());
const mimeType = fileTypes.test (file.mimetype);
 dacă (mimeType && extName) {
întoarcere cb(nul, Adevărat);
 } altfel {
 cb("Eroare: puteți încărca doar imagini!!");
 }
};

The verificațiFileType funcția ia doi parametri: fişier și cb.

În blocul de cod de mai sus, ați definit a tipuri de fisiere variabilă care stochează o expresie regex cu extensiile de fișier imagine permise. Apoi, ai sunat la Test metoda pe expresia regex.

The Test metoda verifică o potrivire în șirul transmis și returnează Adevărat sau fals depinde dacă găsește o potrivire. Apoi, transmiteți numele fișierului încărcat, prin care puteți accesa fişier.nume original, în modulul căii extname metoda, care returnează extensia căii șirului către aceasta. În cele din urmă, înlănțuiți JavaScript toLowerCase funcția șir la expresie pentru a gestiona imaginile cu numele extensiilor lor în majuscule.

Verificarea numelui extensiei nu este suficientă, deoarece numele extensiilor pot fi editate cu ușurință. Pentru a vă asigura că sunt încărcate numai imagini, trebuie să verificați tip MIME de asemenea. Puteți accesa fișierele tip mime proprietate prin intermediul fişier.mimetype. Deci, verificați pentru tip mime proprietate folosind Test metoda așa cum ați făcut pentru numele extensiilor.

Dacă cele două condiții revin adevărate, returnați apelul înapoi cu nul și true, sau returnați apelul înapoi cu o eroare.

În cele din urmă, adăugați fileFilter proprietate la configurația dvs. mai multe.

const upload = multer({
 stocare: stocareMotor,
limite: { mărime fișier: 10000000 },
 fileFilter: (req, file, cb) => {
 checkFileType (fișier, cb);
 },
});

Pasul 4: Utilizarea Multer ca un Middleware Express

În continuare, trebuie să implementați handlere de rută care se vor ocupa de încărcarea imaginilor.

Multer poate gestiona atât încărcări de imagini individuale, cât și multiple, în funcție de configurație.

Adăugați blocul de cod de mai jos la dvs app.js fișier pentru a crea un handler de rută pentru încărcarea unei singure imagini:

app.post("/single", upload.single("imagine"), (req, res) => {
dacă (solicitat.fişier) {
 res.send("Un singur fișier a fost încărcat cu succes");
 } altfel {
 res.status (400).send("Vă rugăm să încărcați o imagine validă");
 }
});

În blocul de cod de mai sus, ați apelat singur metoda pe încărcați variabilă, care stochează configurația dvs. mai multe. Această metodă returnează un middleware care procesează un „fișier unic” asociat cu câmpul de formular dat. Apoi, ai trecut de imagine ca câmp de formular.

În cele din urmă, verificați dacă un fișier a fost încărcat prin intermediul solicitat obiect în fişier proprietate. Dacă a fost, trimiteți un mesaj de succes, altfel trimiteți un mesaj de eroare.

Adăugați blocul de cod de mai jos la dvs app.js fișier pentru a crea un handler de rută pentru mai multe încărcări de imagini:

app.post("/multiple", upload.array("imagini", 5), (req, res) => {
dacă (solicitat.fișiere) {
 res.send("Mai multe fișiere încărcate cu succes");
 } altfel {
 res.status (400).send("Vă rugăm să încărcați o imagine validă");
 }
});

În blocul de cod de mai sus, ați apelat matrice metoda pe încărcați variabilă, care stochează configurația dvs. mai multe. Această metodă ia două argumente - un nume de câmp și un număr maxim - și returnează middleware care procesează mai multe fișiere care partajează același nume de câmp. Apoi, ai trecut imagini ca câmp de formular partajat și 5 ca număr maxim de imagini care pot fi încărcate simultan.

Avantajele utilizării Multer

Utilizarea Multer în aplicațiile dvs. Node.js simplifică procesul, altfel complicat, de încărcare și salvare a imaginilor direct pe server. Multer se bazează, de asemenea, pe busboy, un modul Node.js pentru analizarea datelor din formulare primite, ceea ce îl face foarte eficient pentru analizarea datelor din formular.