Υπάρχουν τρεις κύριοι τρόποι χειρισμού μεταφορτώσεων αρχείων στο Node.js: αποθήκευση των εικόνων απευθείας στον διακομιστή σας, αποθήκευση της εικόνας δυαδικά δεδομένα ή δεδομένα συμβολοσειράς base64 στη βάση δεδομένων σας και χρησιμοποιώντας κάδους S3 της υπηρεσίας Web Amazon (AWS) για αποθήκευση και διαχείριση εικόνες.

Εδώ θα μάθετε πώς να χρησιμοποιείτε το Multer, ένα ενδιάμεσο λογισμικό Node.js, για να ανεβάσετε και να αποθηκεύσετε εικόνες απευθείας στον διακομιστή σας στις εφαρμογές Node.js σε λίγα βήματα.

Βήμα 1: Ρύθμιση περιβάλλοντος ανάπτυξης

Ο κώδικας που χρησιμοποιείται σε αυτό το έργο είναι διαθέσιμος στο α Αποθετήριο GitHub και είναι δωρεάν για χρήση βάσει της άδειας MIT.

Αρχικά, δημιουργήστε έναν φάκελο έργου και μετακινηθείτε σε αυτόν εκτελώντας την ακόλουθη εντολή:

mkdir multi-tutorial
CD πολλαπλό φροντιστήριο

Στη συνέχεια, αρχικοποιήστε το npm στον κατάλογο του έργου σας εκτελώντας:

npm init -y

Στη συνέχεια, θα χρειαστεί να εγκαταστήσετε ορισμένες εξαρτήσεις. Οι εξαρτήσεις που απαιτούνται για αυτό το σεμινάριο περιλαμβάνουν:

instagram viewer
  • Εξπρές: Το Express είναι ένα πλαίσιο Node.js που παρέχει ένα ισχυρό σύνολο δυνατοτήτων για εφαρμογές ιστού και κινητών. Διευκολύνει τη δημιουργία εφαρμογών υποστήριξης με το Node.js.
  • Μούλτερ: Το Multer είναι ένα γρήγορο ενδιάμεσο λογισμικό που απλοποιεί τη μεταφόρτωση και την αποθήκευση εικόνων στον διακομιστή σας.

Εγκαταστήστε τα πακέτα με ο διαχειριστής πακέτων κόμβου τρέχοντας:

npm εγκαθιστώ εξπρές multer

Στη συνέχεια, δημιουργήστε ένα app.js αρχείο στον ριζικό κατάλογο του έργου σας και προσθέστε το μπλοκ κώδικα παρακάτω για να δημιουργήσετε έναν βασικό διακομιστή Express:

//app.js
συνθ εκφράζω = απαιτώ('εξπρές');
συνθ app = express();
συνθ port = διεργασία.env. ΛΙΜΑΝΙ || 3000;
app.listen (port, ()=>{
κονσόλα.κούτσουρο(«Η εφαρμογή ακούει στη θύρα ${port}`);
});

Βήμα 2: Διαμόρφωση του Multer

Πρώτον, εισαγωγή multer στο δικό σου app.js αρχείο.

συνθ multer = απαιτώ("multer");

multer απαιτεί μια μηχανή αποθήκευσης που περιέχει πληροφορίες σχετικά με τον κατάλογο όπου θα αποθηκευτούν τα μεταφορτωμένα αρχεία και πώς θα ονομαστούν τα αρχεία.

ΕΝΑ multer Η μηχανή αποθήκευσης δημιουργείται καλώντας το DiskStorage μέθοδος στο εισαγόμενο multer μονάδα μέτρησης. Αυτή η μέθοδος επιστρέφει a StorageEngine υλοποίηση ρυθμισμένη για αποθήκευση αρχείων στο τοπικό σύστημα αρχείων.

Παίρνει ένα αντικείμενο διαμόρφωσης με δύο ιδιότητες: προορισμός, που είναι μια συμβολοσειρά ή συνάρτηση που καθορίζει πού θα αποθηκευτούν οι μεταφορτωμένες εικόνες.

Το δεύτερο ακίνητο, όνομα αρχείου, είναι μια συνάρτηση που καθορίζει τα ονόματα των μεταφορτωμένων αρχείων. Χρειάζεται τρεις παραμέτρους: απαιτ, αρχείοκαι μια επανάκληση (γβ). απαιτ είναι το Express Αίτηση αντικείμενο, αρχείο είναι ένα αντικείμενο που περιέχει πληροφορίες σχετικά με το επεξεργασμένο αρχείο και γβ είναι μια επανάκληση που καθορίζει τα ονόματα των μεταφορτωμένων αρχείων. Η συνάρτηση επανάκλησης λαμβάνει ως ορίσματα το σφάλμα και το όνομα αρχείου.

Προσθέστε το μπλοκ κώδικα παρακάτω στο δικό σας app.js αρχείο για να δημιουργήσετε μια μηχανή αποθήκευσης:

//Ρύθμιση μηχανής αποθήκευσης
συνθ storageEngine = multer.diskStorage({
 προορισμός: "./εικόνες",
 όνομα αρχείου: (req, αρχείο, cb) => {
 cb(μηδενικό, `${Ημερομηνία.τώρα()}--${file.originalname}`);
 },
});

Στο μπλοκ κώδικα παραπάνω, ορίζετε το προορισμός ιδιοκτησία σε”./εικόνες”, έτσι, οι εικόνες θα αποθηκευτούν στον κατάλογο του έργου σας σε ένα εικόνες ντοσιέ. Μετά, στο callback, πέρασες μηδενικό ως το σφάλμα και μια συμβολοσειρά προτύπου ως όνομα αρχείου. Η συμβολοσειρά προτύπου αποτελείται από μια χρονική σήμανση που δημιουργείται με κλήση Date.now() για να διασφαλίσετε ότι τα ονόματα των εικόνων είναι πάντα μοναδικά, δύο παύλες για να διαχωρίσετε το όνομα αρχείου και τη χρονική σήμανση και το αρχικό όνομα του αρχείου, στο οποίο μπορείτε να έχετε πρόσβαση από το αρχείο αντικείμενο.

Οι συμβολοσειρές που προκύπτουν από αυτό το πρότυπο θα μοιάζουν με αυτό: 1663080276614--example.jpg.

Στη συνέχεια, πρέπει να αρχικοποιήσετε multer με τη μηχανή αποθήκευσης.

Προσθέστε το μπλοκ κώδικα παρακάτω στο δικό σας app.js αρχείο για την προετοιμασία του multer με τη μηχανή αποθήκευσης:

//initializing multer
συνθ upload = multer({
 αποθήκευση: αποθήκευση Κινητήρας,
});

multer επιστρέφει μια παρουσία του Multer που παρέχει πολλές μεθόδους για τη δημιουργία ενδιάμεσου λογισμικού που επεξεργάζεται τα αρχεία που έχουν ανέβει πολυμερών/μορφών-δεδομένων μορφή.

Στο μπλοκ κώδικα παραπάνω, μεταβιβάζετε ένα αντικείμενο διαμόρφωσης με a αποθήκευση ιδιοκτησία ορίζεται σε Κινητήρας αποθήκευσης, που είναι η μηχανή αποθήκευσης που δημιουργήσατε νωρίτερα.

Επί του παρόντος, η διαμόρφωση του Multer έχει ολοκληρωθεί, αλλά δεν υπάρχουν κανόνες επικύρωσης που να διασφαλίζουν ότι μπορούν να αποθηκευτούν μόνο εικόνες στον διακομιστή σας.

Βήμα 3: Προσθήκη κανόνων επικύρωσης εικόνας

Ο πρώτος κανόνας επικύρωσης που μπορείτε να προσθέσετε είναι το μέγιστο μέγεθος που επιτρέπεται για τη μεταφόρτωση μιας εικόνας στην εφαρμογή σας.

Ενημερώστε το αντικείμενο διαμόρφωσης multer με το παρακάτω μπλοκ κώδικα:

συνθ upload = multer({
 αποθήκευση: αποθήκευση Κινητήρας,
όρια: { μέγεθος αρχείου: 1000000 },
});

Στο μπλοκ κώδικα παραπάνω, προσθέσατε ένα όρια ιδιοκτησία στο αντικείμενο διαμόρφωσης. Αυτή η ιδιότητα είναι ένα αντικείμενο που καθορίζει διάφορα όρια στα εισερχόμενα δεδομένα. Ρυθμίζετε το μέγεθος αρχείου ιδιότητα, με την οποία ορίζεται το μέγιστο μέγεθος αρχείου σε byte 1000000, που ισοδυναμεί με 1MB.

Ένας άλλος κανόνας επικύρωσης που μπορείτε να προσθέσετε είναι ο Φίλτρο αρχείου ιδιοκτησία, μια προαιρετική συνάρτηση για τον έλεγχο των αρχείων που μεταφορτώνονται. Αυτή η συνάρτηση καλείται για κάθε αρχείο που υποβάλλεται σε επεξεργασία. Αυτή η συνάρτηση παίρνει τις ίδιες παραμέτρους με το όνομα αρχείου λειτουργία: απαιτ, αρχείο, και γβ.

Για να κάνετε τον κώδικα καθαρότερο και πιο επαναχρησιμοποιήσιμο, θα αφαιρέσετε όλη τη λογική του φιλτραρίσματος σε μια συνάρτηση.

Προσθέστε το μπλοκ κώδικα παρακάτω στο δικό σας app.js αρχείο για την υλοποίηση της λογικής φιλτραρίσματος αρχείων:

συνθ μονοπάτι = απαιτώ("μονοπάτι");
συνθ checkFileType = λειτουργία (αρχείο, γβ) {
//Επιτρεπόμενες επεκτάσεις αρχείων
συνθ Τύποι αρχείου = /jpeg|jpg|png|gif|svg/;
 //έλεγχος επέκταση ονόματα
συνθ extName = fileTypes.test (path.extname (file.originalname).toLowerCase());
συνθ mimeType = fileTypes.test (file.mimetype);
 εάν (mimeType && extname) {
ΕΠΙΣΤΡΟΦΗ cb(μηδενικό, αληθής);
 } αλλού {
 cb("Σφάλμα: Μπορείτε να ανεβάσετε μόνο εικόνες!!");
 }
};

ο checkFileType Η συνάρτηση παίρνει δύο παραμέτρους: αρχείο και γβ.

Στο μπλοκ κώδικα παραπάνω, ορίσατε α τύποι αρχείων μεταβλητή που αποθηκεύει μια έκφραση regex με τις επιτρεπόμενες επεκτάσεις αρχείων εικόνας. Στη συνέχεια, καλέσατε το δοκιμή μέθοδος στην έκφραση regex.

ο δοκιμή Η μέθοδος ελέγχει για αντιστοιχία στη συμβολοσειρά που πέρασε και επιστρέφει αληθής ή ψευδής ανάλογα με το αν βρίσκει ταίρι. Στη συνέχεια, μεταβιβάζετε το όνομα του μεταφορτωμένου αρχείου, στο οποίο μπορείτε να αποκτήσετε πρόσβαση file.originalname, στη μονάδα της διαδρομής επώνυμο μέθοδο, η οποία επιστρέφει την επέκταση της διαδρομής συμβολοσειράς σε αυτήν. Τέλος, συνδέετε την JavaScript σε πεζά συνάρτηση συμβολοσειράς στην έκφραση για να χειριστείτε εικόνες με τα ονόματα των επεκτάσεών τους με κεφαλαία.

Ο έλεγχος μόνο του ονόματος της επέκτασης δεν αρκεί, καθώς τα ονόματα των επεκτάσεων μπορούν εύκολα να επεξεργαστούν. Για να βεβαιωθείτε ότι μεταφορτώνονται μόνο εικόνες, πρέπει να ελέγξετε το Τύπος MIME πολύ. Μπορείτε να αποκτήσετε πρόσβαση σε ένα αρχείο μιμητικός τύπος ιδιοκτησίας μέσω του αρχείο.mimettype. Έτσι, ελέγχετε για το μιμητικός τύπος ιδιοκτησία που χρησιμοποιεί το δοκιμή μέθοδο όπως κάνατε για τα ονόματα των επεκτάσεων.

Εάν οι δύο συνθήκες επιστρέψουν αληθείς, επιστρέφετε την επανάκληση με μηδενικό και true, ή επιστρέφετε την επανάκληση με σφάλμα.

Τέλος, προσθέτετε το Φίλτρο αρχείου ιδιοκτησία στη διαμόρφωση multer σας.

συνθ upload = multer({
 αποθήκευση: αποθήκευση Κινητήρας,
όρια: { μέγεθος αρχείου: 10000000 },
 fileFilter: (απαιτ., αρχείο, cb) => {
 checkFileType (αρχείο, cb);
 },
});

Βήμα 4: Χρήση του Multer ως Express Middleware

Στη συνέχεια, πρέπει να εφαρμόσετε προγράμματα χειρισμού διαδρομών που θα χειρίζονται τις μεταφορτώσεις εικόνων.

Το Multer μπορεί να χειριστεί τόσο μεμονωμένες όσο και πολλαπλές μεταφορτώσεις εικόνων ανάλογα με τη διαμόρφωση.

Προσθέστε το μπλοκ κώδικα παρακάτω στο δικό σας app.js αρχείο για τη δημιουργία ενός προγράμματος χειρισμού διαδρομής για μεταφορτώσεις μεμονωμένων εικόνων:

app.post("/single", upload.single("εικόνα"), (απ., res) => {
αν (απαιτ.αρχείο) {
 res.send("Ένα μόνο αρχείο μεταφορτώθηκε με επιτυχία");
 } αλλού {
 res.status (400).send("Ανεβάστε μια έγκυρη εικόνα");
 }
});

Στο μπλοκ κώδικα παραπάνω, καλέσατε το μονόκλινο μέθοδος στο μεταφόρτωση μεταβλητή, η οποία αποθηκεύει τη διαμόρφωση του multer σας. Αυτή η μέθοδος επιστρέφει ένα ενδιάμεσο λογισμικό που επεξεργάζεται ένα "μονό αρχείο" που σχετίζεται με το δεδομένο πεδίο φόρμας. Μετά, πέρασες το εικόνα ως πεδίο φόρμας.

Τέλος, ελέγξτε εάν ένα αρχείο μεταφορτώθηκε μέσω του απαιτ αντικείμενο στο αρχείο ιδιοκτησία. Εάν ήταν, στέλνετε μήνυμα επιτυχίας, διαφορετικά στέλνετε μήνυμα σφάλματος.

Προσθέστε το μπλοκ κώδικα παρακάτω στο δικό σας app.js αρχείο για τη δημιουργία ενός προγράμματος χειρισμού διαδρομής για πολλαπλές μεταφορτώσεις εικόνων:

app.post("/multiple", upload.array("εικόνες", 5), (απαιτ., res) => {
αν (απαιτ.αρχεία) {
 res.send("Πολλά αρχεία μεταφορτώθηκαν με επιτυχία");
 } αλλού {
 res.status (400).send("Ανεβάστε έγκυρες εικόνες");
 }
});

Στο μπλοκ κώδικα παραπάνω, καλέσατε το πίνακας μέθοδος στο μεταφόρτωση μεταβλητή, η οποία αποθηκεύει τη διαμόρφωση του multer σας. Αυτή η μέθοδος παίρνει δύο ορίσματα—ένα όνομα πεδίου και ένα μέγιστο πλήθος—και επιστρέφει ενδιάμεσο λογισμικό που επεξεργάζεται πολλά αρχεία που μοιράζονται το ίδιο όνομα πεδίου. Μετά, πέρασες εικόνες ως το πεδίο κοινής φόρμας και 5 ως ο μέγιστος αριθμός εικόνων που μπορούν να μεταφορτωθούν ταυτόχρονα.

Πλεονεκτήματα της χρήσης του Multer

Η χρήση του Multer στις εφαρμογές Node.js απλοποιεί την κατά τα άλλα πολύπλοκη διαδικασία μεταφόρτωσης και αποθήκευσης εικόνων απευθείας στον διακομιστή σας. Το Multer βασίζεται επίσης στο busboy, μια λειτουργική μονάδα Node.js για την ανάλυση εισερχόμενων δεδομένων φόρμας, καθιστώντας την πολύ αποτελεσματική για την ανάλυση δεδομένων φόρμας.