Quando si creano API, è prevista la necessità di caricare file, che possono essere immagini, documenti di testo, script, PDF, tra gli altri. Nello sviluppo di questa funzionalità, è possibile trovare alcuni problemi, come il numero di file, i tipi di file validi, le dimensioni di questi file e molti altri. E per salvarci da questi problemi abbiamo la biblioteca Multer. Multer è un nodo.middleware js per la gestione multipart/form-data che viene utilizzato per inviare file in moduli.

Primi passi

Il primo passo è creare un progetto NodeJS sul tuo computer.

Aggiunta di Express

Nel terminale, digitare il seguente comando:

yarn add express

* È inoltre possibile utilizzare NPM per l’installazione

Creare un file denominato app.js all’interno della cartella src/. Il prossimo passo è avviare il nostro server Express nel nostro app.js

const express = require("express")const app = express()app.listen(3000 || process.env.PORT, () => { console.log("Server on...")})

Aggiunta Multer

Con il progetto creato, configurato e con Express installato, aggiungeremo il multer al nostro progetto.

yarn add multer

Il passo successivo è importare il multer nel nostro file app.js.

const multer = require("multer")

Siamo quasi arrivati. Ora crea una cartella chiamata uploads dove memorizzeremo i file caricati.

Configurazione e convalida del caricamento

Ora siamo in una fase molto importante che è la configurazione di diskStorage. DiskStorage è un metodo messo a disposizione da multer dove configuriamo la destinazione del file, il nome del file e possiamo anche aggiungere convalide per quanto riguarda il tipo di file. Queste impostazioni sono in base alle esigenze del progetto. Di seguito lascerò un esempio elementare della configurazione.

const storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, "uploads/") }, filename: (req, file, cb) => { cb(null, Date.now() + "-" + file.originalname) },})

Nella configurazione di cui sopra, abbiamo menzionato la destinazione per i file caricati e anche cambiare il nome del file .

Fornire un percorso di upload

const uploadStorage = multer({ storage: storage })// Single fileapp.post("/upload/single", uploadStorage.single("file"), (req, res) => { console.log(req.file) return res.send("Single file")})//Multiple filesapp.post("/upload/multiple", uploadStorage.array("file", 10), (req, res) => { console.log(req.files) return res.send("Multiple files")})

Nello snippet di codice sopra, abbiamo creato 2 percorsi POST per l’invio di file. La prima rotta /upload/single riceve solo un singolo file, si noti che la variabile uploadStorage riceve le nostre impostazioni diskStorage. Come middleware nel percorso, chiama il metodo single per caricare un singolo file. Il percorso /upload/multiple riceve diversi file, ma con un limite massimo di 10 file, si noti che la variabile uploadStorage ora chiama il metodo “array” per caricare più file.

La fine

Con tutte le impostazioni fatte, la nostra piccola API è già in grado di memorizzare i file inviati.

const express = require("express")const multer = require("multer")const app = express()const storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, "uploads/") }, filename: (req, file, cb) => { cb(null, Date.now() + "-" + file.originalname) },})const uploadStorage = multer({ storage: storage })// Single fileapp.post("/upload/single", uploadStorage.single("file"), (req, res) => { console.log(req.file) return res.send("Single file")})//Multiple filesapp.post("/upload/multiple", uploadStorage.array("file", 10), (req, res) => { console.log(req.files) return res.send("Multiple files")})app.listen(3000 || process.env.PORT, () => { console.log("Server on...")})

Ora tocca a te!