Si të ngarkoni imazhe me një Backend Node.js në Multer dhe Express

Prezantimi

Ndërsa mund të ngarkoni imazhe në pjesën e përparme, do t'ju duhet të zbatoni një API dhe bazë të dhënash në pjesën e pasme për t'i marrë ato. Me Express, një kornizë Node.js, mund të vendosni ngarkime skedarësh dhe imazhesh në një cilësim.

Në këtë artikull, do të mësoni se si të ngarkoni imazhe me një backend të Node.js duke përdorur Multer dhe Express.

Parakushtet

  • Rekomandohet një kuptim i Node.js. Për të mësuar më shumë rreth Node.js, shikoni serinë tonë Si të kodoni në Node.js.
  • Sugjerohet një kuptim i përgjithshëm i metodave të kërkesës HTTP në Express. Për të mësuar më shumë rreth metodave të kërkesës HTTP, shikoni udhëzuesin tonë Si të Përcaktoni Rrugët dhe Metodat e Kërkesës HTTP në Express.

Hapi 1 - Vendosja e projektit

Duke qenë se Express është një kornizë Node.js, sigurohuni që të keni Node.js të instaluar nga Node.js përpara se të ndiqni hapat e ardhshëm. Ekzekutoni sa vijon në terminalin tuaj:

Krijoni një direktori të re me emrin node-multer-express për projektin tuaj:

  1. mkdir node-multer-express

Ndrysho në drejtorinë e re:

  1. cd node-multer-express

Inicializoni një projekt të ri Node.js me parazgjedhje. Kjo do të përfshijë skedarin tuaj package.json për të hyrë në varësitë tuaja:

  1. npm init

Krijoni skedarin tuaj të hyrjes, index.js. Këtu do të trajtoni logjikën tuaj Express:

  1. touch index.js

Instaloni Multer, Express dhe Morgan si varësi:

  1. npm install multer express morgan --save

Multer është biblioteka juaj e ngarkimit të imazheve dhe menaxhon qasjen në të dhënat e formularit nga një kërkesë Express. morgan është program i mesëm Express për regjistrimin e kërkesave të rrjetit.

Aplikimi i Multer në projektin tuaj

Për të konfiguruar bibliotekën tuaj Multer, përdorni metodën .diskStorage() për t'i treguar Express se ku të ruhen skedarët në disk. Në skedarin tuaj index.js, kërkoni Multer dhe deklaroni një variabël storage dhe caktoni vlerën e saj thirrjen e metodës .diskStorage():

const multer = require('multer');

const storage = multer.diskStorage({
  destination: function(req, file, callback) {
    callback(null, '/src/my-images');
  },
  filename: function (req, file, callback) {
    callback(null, file.fieldname);
  }
});

Vetia destinacioni në metodën diskStorage() përcakton se cilën drejtori do të ruajnë skedarët. Këtu, skedarët do të ruhen në drejtorinë, imazhet e mia. Nëse nuk keni aplikuar një destinacion, sistemi operativ do të jetë i paracaktuar në një drejtori për skedarët e përkohshëm.

Vetia emri i skedarit tregon se si t'i emërtoni skedarët tuaj. Nëse nuk vendosni një emër skedari, Multer do të kthejë një emër të krijuar rastësisht për skedarët tuaj.

Shënim: Multer nuk shton shtesa në emrat e skedarëve dhe rekomandohet të ktheni një emër skedari të plotë me një shtesë skedari.

Me konfigurimin tuaj të Multer të përfunduar, le ta kombinojmë atë brenda serverit tuaj Express.

Hapi 2 - Trajtimi i serverit Express

Serveri juaj Express është vendi ku trajtoni logjikën për metodat e kërkesës HTTP, metodat e ciklit të jetës kërkesë dhe response dhe ku mund të zbatoni varësitë Multer dhe morgan për transferimin e skedarëve dhe imazheve .

Në skedarin tuaj index.js, deklaroni një variabël app dhe caktoni vlerën e tij një shembull Express. Kërkoni në Multer dhe morgan dhe deklaroni një variabël upload për të ruajtur një shembull Multer:

import morgan from 'morgan';
import express from 'express';
const app = express();
const multer = require('multer');
const upload = multer({dest: 'uploads/'});

app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(morgan('dev'));

app.use(express.static(__dirname, 'public'));

Ju do të përdorni programin e mesëm Express, .use(), për të kaluar në programin e mesëm .json() për të analizuar përgjigjet tuaja hyrëse si një objekt JSON. Gjithashtu, .use() pranon një thirrje të morgan dhe argumentin dev. Kjo i thotë Expressit të përdorë mjedisin e zhvillimit të Morgan për t'ju njoftuar për statusin e përgjigjes. Për të krijuar skedarë statikë, transferoni në programin e mesëm Express .static() në .use() dhe përcaktoni drejtorinë që përmban imazhet tuaja si argument.

Pasi të keni vendosur variablat tuaja globale, vendosni një kërkesë POST që pranon një rrugë anonime dhe kthimin e thirrjes req dhe përgjigje për të marrë skedarë të rinj dhe imazhe:

app.post('/', upload.single('file'), (req, res) => {
  if (!req.file) {
    console.log("No file received");
    return res.send({
      success: false
    });

  } else {
    console.log('file received');
    return res.send({
      success: true
    })
  }
});

Kur rruga anonime merr një skedar ose imazh, Multer do t'i ruajë ato në drejtorinë tuaj të specifikuar. Argumenti i dytë në kërkesën tuaj POST, upload.single() është një metodë e integruar Multer për të ruajtur një skedar me një veçori fieldname dhe ruajeni atë në objektin Express req.file. Vetia fieldname është përcaktuar në metodën tuaj Multer .diskStorage().

Nëse integroni një bazë të dhënash, mund të kërkoni emrin e skedarit në skedarin tuaj index.js:

const host = req.host;
const filePath = req.protocol + "://" + host + '/' + req.file.path;

Ruani variablin filePath në bazën e të dhënave dhe përdorni bazën tuaj të të dhënave me emrat e skedarëve në hyrje.

konkluzioni

Express ju ofron një proces për të ruajtur dhe ruajtur skedarët dhe imazhet hyrëse në serverin tuaj. Varësia e programit të mesëm Multer riorganizon të dhënat e formularit tuaj për të trajtuar ngarkimet e shumëfishta të skedarëve.

Nëse dëshironi të mësoni më shumë rreth Node.js, hidhini një sy faqes sonë të temës Node.js për ushtrime dhe projekte programimi.