Ci sono tre modi principali per gestire i caricamenti di file in Node.js: salvare le immagini direttamente sul tuo server, salvare l'immagine dati binari o dati stringa base64 nel database e utilizzando i bucket S3 di Amazon Web Service (AWS) per salvare e gestire i tuoi immagini.
Qui imparerai come utilizzare Multer, un middleware Node.js, per caricare e salvare le immagini direttamente sul tuo server nelle applicazioni Node.js in pochi passaggi.
Passaggio 1: impostazione dell'ambiente di sviluppo
Il codice utilizzato in questo progetto è disponibile in a Deposito GitHub ed è gratuito per l'uso con la licenza MIT.
Innanzitutto, crea una cartella di progetto e spostati al suo interno eseguendo il seguente comando:
mkdir multi-tutorial
CD multi-tutorial
Successivamente, inizializza npm nella directory del tuo progetto eseguendo:
npm init -y
Successivamente, dovrai installare alcune dipendenze. Le dipendenze richieste per questo tutorial includono:
- Esprimere: Express è un framework Node.js che fornisce un robusto set di funzionalità per applicazioni web e mobili. Semplifica la creazione di applicazioni back-end con Node.js.
- Multer: Multer è un middleware espresso che semplifica il caricamento e il salvataggio delle immagini sul tuo server.
Installa i pacchetti con il gestore di pacchetti del nodo eseguendo:
npm installare espresso multer
Successivamente, crea un file app.js file nella directory principale del progetto e aggiungi il blocco di codice seguente per creare un server Express di base:
//app.js
cost espresso = richiedere('esprimere');
cost app = espresso();
cost porta = processo.env. PORTO || 3000;
app.listen (porta, ()=>{
consolare.tronco d'albero(`L'app è in ascolto sulla porta ${porta}`);
});
Passaggio 2: configurazione di Multer
Innanzitutto, importa multer nel tuo app.js file.
cost multer = richiedere("multer");
multer richiede un motore di archiviazione che contenga informazioni sulla directory in cui verranno archiviati i file caricati e su come verranno denominati i file.
UN multer il motore di archiviazione viene creato chiamando il diskStorage metodo sull'importato multer modulo. Questo metodo restituisce a Motore di archiviazione implementazione configurata per archiviare i file nel file system locale.
Prende un oggetto di configurazione con due proprietà: destinazione, ovvero una stringa o una funzione che specifica dove verranno archiviate le immagini caricate.
La seconda proprietà, nome del file, è una funzione che determina i nomi dei file caricati. Richiede tre parametri: req, filee una richiamata (cb). req è l'Espresso Richiesta oggetto, file è un oggetto contenente informazioni sul file elaborato e cb è un callback che determina i nomi dei file caricati. La funzione di callback accetta l'errore e il nome del file come argomenti.
Aggiungi il blocco di codice qui sotto al tuo app.js file per creare un motore di archiviazione:
//Impostazione del motore di archiviazione
cost storageEngine = multir.diskStorage({
destinazione: "./immagini",
nomefile: (req, file, cb) => {
cb(nullo, `${Data.Ora()}--${file.nomeoriginale}`);
},
});
Nel blocco di codice sopra, imposti il file destinazione proprietà a”./immagini”, quindi, le immagini verranno archiviate nella directory del tuo progetto in un file immagini cartella. Quindi, nella richiamata, sei passato nullo come errore e una stringa modello come nome file. La stringa del modello è costituita da un timestamp generato dalla chiamata Data.ora() per garantire che i nomi delle immagini siano sempre univoci, due trattini per separare il nome del file e il timestamp e il nome originale del file, accessibile dal file oggetto.
Le stringhe risultanti da questo modello avranno questo aspetto: 1663080276614--example.jpg.
Successivamente, è necessario inizializzare multer con il motore di archiviazione.
Aggiungi il blocco di codice qui sotto al tuo app.js file per inizializzare multer con il motore di archiviazione:
//inizializzazione di multer
cost carica = multi({
archiviazione: storageEngine,
});
multer restituisce un'istanza Multer che fornisce diversi metodi per la generazione di middleware che elabora i file caricati multipart/forma-dati formato.
Nel blocco di codice sopra, passi un oggetto di configurazione con a magazzinaggio proprietà impostata su storageEngine, ovvero il motore di archiviazione creato in precedenza.
Attualmente, la tua configurazione di Multer è completa, ma non ci sono regole di convalida che assicurino che solo le immagini possano essere salvate sul tuo server.
Passaggio 3: aggiunta di regole di convalida dell'immagine
La prima regola di convalida che puoi aggiungere è la dimensione massima consentita per il caricamento di un'immagine nella tua applicazione.
Aggiorna il tuo oggetto di configurazione multiplo con il seguente blocco di codice:
cost carica = multi({
archiviazione: storageEngine,
limiti: { dimensione del file: 1000000 },
});
Nel blocco di codice sopra, hai aggiunto a limiti proprietà all'oggetto di configurazione. Questa proprietà è un oggetto che specifica vari limiti sui dati in entrata. Tu imposti il dimensione del file proprietà, con la quale è impostata la dimensione massima del file in byte 1000000, che equivale a 1 MB.
Un'altra regola di convalida che puoi aggiungere è la fileFilter property, una funzione facoltativa per controllare quali file vengono caricati. Questa funzione viene chiamata per ogni file elaborato. Questa funzione accetta gli stessi parametri della nome del file funzione: req, file, E cb.
Per rendere il tuo codice più pulito e riutilizzabile, astrarrai tutta la logica di filtraggio in una funzione.
Aggiungi il blocco di codice qui sotto al tuo app.js file per implementare la logica di filtraggio dei file:
cost percorso = richiedere("sentiero");
cost checkFileType = funzione (fascicolo, cb) {
//Estensioni di file consentite
cost fileTypes = /jpeg|jpg|png|gif|svg/;
//controllo estensione nomi
cost extName = fileTypes.test (path.extname (file.originalname).toLowerCase());
cost mimeType = fileTypes.test (file.mimetype);
se (mimeType && nomeest) {
ritorno cb(nullo, VERO);
} altro {
cb("Errore: puoi caricare solo immagini!!");
}
};
IL checkFileType la funzione accetta due parametri: file E cb.
Nel blocco di codice sopra, hai definito a tipi di file variabile che memorizza un'espressione regex con le estensioni di file immagine consentite. Successivamente, hai chiamato il test metodo sull'espressione regex.
IL test Il metodo verifica la presenza di una corrispondenza nella stringa passata e restituisce VERO O falso a seconda che trovi una corrispondenza. Quindi, passi il nome del file caricato, a cui puoi accedere file.nomeoriginale, nel modulo del percorso extname metodo, che restituisce l'estensione del percorso della stringa ad esso. Infine, incateni il codice JavaScript toLowerCase funzione stringa all'espressione per gestire le immagini con i nomi delle estensioni in maiuscolo.
Controllare solo il nome dell'estensione non è sufficiente, poiché i nomi delle estensioni possono essere facilmente modificati. Per assicurarti che vengano caricate solo immagini, devi controllare il file tipo MIME pure. Puoi accedere a un file mimetype proprietà attraverso il file.mimetype. Quindi, controlli il file mimetype proprietà utilizzando il test metodo come hai fatto per i nomi delle estensioni.
Se le due condizioni restituiscono true, si restituisce la richiamata con nullo e true oppure restituisci la richiamata con un errore.
Infine, aggiungi il file fileFilter property alla tua configurazione multiter.
cost carica = multi({
archiviazione: storageEngine,
limiti: { dimensione del file: 10000000 },
fileFilter: (req, file, cb) => {
checkFileType (file, cb);
},
});
Passaggio 4: utilizzo di Multer come middleware espresso
Successivamente, devi implementare i gestori di route che gestiranno i caricamenti delle immagini.
Multer può gestire caricamenti di immagini singole e multiple a seconda della configurazione.
Aggiungi il blocco di codice qui sotto al tuo app.js file per creare un gestore di route per i caricamenti di immagini singole:
app.post("/single", carica.singolo("Immagine"), (richiesta, res) => {
Se (req.file) {
res.send("Singolo file caricato correttamente");
} altro {
res.status (400).send("Carica un'immagine valida");
}
});
Nel blocco di codice sopra, hai chiamato il file separare metodo sul caricamento variabile, che memorizza la tua configurazione multiter. Questo metodo restituisce un middleware che elabora un "singolo file" associato al campo del modulo specificato. Quindi, hai superato il Immagine come campo del modulo.
Infine, controlla se un file è stato caricato tramite il file req oggetto nel file proprietà. In tal caso, invii un messaggio di successo, altrimenti invii un messaggio di errore.
Aggiungi il blocco di codice qui sotto al tuo app.js file per creare un gestore di instradamento per più caricamenti di immagini:
app.post("/multiple", carica.array("immagini", 5), (richiesta, res) => {
Se (req.File) {
res.send("Più file caricati correttamente");
} altro {
res.status (400).send("Si prega di caricare un'immagine valida");
}
});
Nel blocco di codice sopra, hai chiamato il file vettore metodo sul caricamento variabile, che memorizza la tua configurazione multiter. Questo metodo accetta due argomenti, un nome di campo e un conteggio massimo, e restituisce il middleware che elabora più file che condividono lo stesso nome di campo. Poi sei passato immagini come campo del modulo condiviso e 5 come numero massimo di immagini caricabili contemporaneamente.
Vantaggi dell'utilizzo di Multer
L'utilizzo di Multer nelle tue applicazioni Node.js semplifica il processo altrimenti complicato di caricamento e salvataggio delle immagini direttamente sul tuo server. Multer si basa anche su busboy, un modulo Node.js per l'analisi dei dati dei moduli in entrata, rendendolo molto efficiente per l'analisi dei dati dei moduli.
