Ինչպես վերբեռնել պատկերներ Node.js-ում Multer-ի միջոցով

Node.js-ի միջոցով պատկերների վերբեռնումը կարող է բարդ թվալ: Մուլտեր փաթեթը հեշտացնում է ֆայլերի վերբեռնումները Node.js-ում:

Node.js-ում ֆայլերի վերբեռնումը կարգավորելու երեք հիմնական եղանակ կա՝ պատկերները պահել անմիջապես ձեր սերվերում, պահպանել պատկերի երկուական տվյալները կամ base64 տողային տվյալները ձեր տվյալների բազայում և օգտագործել Amazon Web Service (AWS) S3 դույլերը՝ ձեր պահելու և կառավարելու համար: պատկերներ.

Այստեղ դուք կսովորեք, թե ինչպես օգտագործել Multer-ը՝ Node.js-ի միջնակարգ ծրագրակազմը, մի քանի քայլով Node.js հավելվածներում պատկերներ անմիջապես ձեր սերվերում վերբեռնելու և պահելու համար:

Քայլ 1. Զարգացման միջավայրի ստեղծում

Նախ, ստեղծեք նախագծի թղթապանակ և տեղափոխեք այն՝ գործարկելով հետևյալ հրամանը.

mkdir multer-tutorial
cd multer-tutorial

Հաջորդը, նախաստորագրեք npm-ը ձեր նախագծի գրացուցակում՝ գործարկելով.

npm init -y

Հաջորդը, դուք պետք է տեղադրեք որոշ կախվածություններ: Այս ձեռնարկի համար անհրաժեշտ կախվածությունները ներառում են.

• Express. Express-ը Node.js-ի շրջանակ է, որն ապահովում է վեբ և բջջային հավելվածների համար նախատեսված գործառույթների մի շարք: Այն հեշտացնում է Node.js-ի հետ backend հավելվածների ստեղծումը:
• Multer. Multer-ը էքսպրես միջին ծրագիր է, որը հեշտացնում է պատկերների վերբեռնումը և պահպանումը ձեր սերվերում:

Տեղադրեք փաթեթները հանգույցի փաթեթների կառավարչի հետ՝ գործարկելով.

npm install express multer

Հաջորդը, ձեր նախագծի արմատական գրացուցակում ստեղծեք app.js ֆայլ և ավելացրեք ստորև բերված կոդի բլոկը՝ հիմնական Էքսպրես սերվեր ստեղծելու համար.

//app.js
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;
app.listen(port, ()=>{
    console.log(`App is listening on port ${port}`);
});

Քայլ 2. Մուլտերի կարգավորում

Նախ ներմուծեք multer ձեր app.js ֆայլում:

const multer = require("multer");

multer-ը պահանջում է պահեստավորման շարժիչ, որը պարունակում է տեղեկատվություն այն գրացուցակի մասին, որտեղ կպահվեն բեռնված ֆայլերը և ինչպես են անվանվելու ֆայլերը:

multer պահեստավորման շարժիչը ստեղծվում է ներմուծված multer մոդուլի վրա diskStorage մեթոդը կանչելու միջոցով: Այս մեթոդը վերադարձնում է StorageEngine իրականացումը, որը կազմաձևված է ֆայլերը տեղական ֆայլային համակարգում պահելու համար:

Այն պահանջում է կազմաձևման օբյեկտ՝ երկու հատկությամբ՝ destination, որը տող է կամ ֆունկցիա, որը նշում է, թե որտեղ են պահվելու վերբեռնված պատկերները:

Երկրորդ հատկությունը՝ filename, ֆունկցիա է, որը որոշում է վերբեռնված ֆայլերի անունները: Այն պահանջում է երեք պարամետր՝ պահանջ, ֆայլ և հետադարձ զանգ (cb): req-ը Պահանջ էքսպրես օբյեկտն է, ֆայլը-ը մշակված ֆայլի մասին տեղեկատվություն պարունակող օբյեկտ է, իսկ cb-ը հանդիսանում է հետ կանչ, որը որոշում է վերբեռնված ֆայլերի անունները: Հետ կանչելու ֆունկցիան ընդունում է սխալը և ֆայլի անունը որպես արգումենտ:

Ստորև բերված կոդի բլոկը ավելացրեք ձեր app.js ֆայլում՝ պահեստավորման շարժիչ ստեղծելու համար.

//Setting storage engine
const storageEngine = multer.diskStorage({
  destination: "./images",
  filename: (req, file, cb) => {
    cb(null, `${Date.now()}--${file.originalname}`);
  },
});

Վերևի կոդի բլոկում դուք սահմանել եք destination հատկությունը «./images», այսպիսով, պատկերները կպահվեն ձեր նախագծի գրացուցակում՝ images<: թղթապանակ: Այնուհետև, հետ կանչի ժամանակ դուք փոխանցեցիք null որպես սխալ և կաղապարի տող որպես ֆայլի անուն: Կաղապարի տողը բաղկացած է ժամանակի դրոշմից, որը ստեղծվել է՝ զանգահարելով Date.now()՝ համոզվելու, որ պատկերների անունները միշտ եզակի են, երկու գծիկ՝ ֆայլի անվանումն ու ժամանակի դրոշմակնիքից բաժանելու համար, և ֆայլի սկզբնական անունը, որը կարող է. մուտք գործել ֆայլ օբյեկտից:

Այս ձևանմուշից ստացվող տողերը կունենան հետևյալ տեսքը՝ 1663080276614--example.jpg:

Հաջորդը, դուք պետք է նախաստորագրեք multer պահեստավորման շարժիչով:

Ստորև բերված կոդի բլոկը ավելացրեք ձեր app.js ֆայլում՝ մուլտերը պահեստավորման շարժիչով սկզբնավորելու համար.

//initializing multer
const upload = multer({
  storage: storageEngine,
});

multer-ը վերադարձնում է Multer-ի օրինակ, որն ապահովում է մի քանի եղանակներ միջին ծրագրակազմ ստեղծելու համար, որը մշակում է բազմամասնական/ձև-տվյալների ձևաչափով վերբեռնված ֆայլերը:

Վերևի կոդի բլոկում դուք փոխանցում եք կազմաձևման օբյեկտ՝ storage հատկությամբ, որը դրված է storageEngine, որը նախկինում ստեղծված պահեստային շարժիչն է:

Ներկայումս ձեր Multer-ի կազմաձևումն ավարտված է, սակայն չկան վավերացման կանոններ, որոնք ապահովում են, որ միայն պատկերները կարող են պահպանվել ձեր սերվերում:

Քայլ 3. Պատկերի վավերացման կանոնների ավելացում

Վավերացման առաջին կանոնը, որը կարող եք ավելացնել, ձեր հավելվածում պատկերի վերբեռնման համար թույլատրելի առավելագույն չափն է:

Թարմացրեք ձեր multer կազմաձևման օբյեկտը ստորև նշված ծածկագրի բլոկով.

const upload = multer({
  storage: storageEngine,
  limits: { fileSize: 1000000 },
});

Վերևի կոդի բլոկում դուք ավելացրել եք սահմաններ հատկություն կազմաձևման օբյեկտին: Այս հատկությունը օբյեկտ է, որը սահմանում է մուտքային տվյալների տարբեր սահմանափակումներ: Դուք սահմանել եք fileSize հատկությունը, որի միջոցով ֆայլի առավելագույն չափը բայթերով սահմանվում է 1000000, որը համարժեք է 1 ՄԲ-ի:

Վավերացման մեկ այլ կանոն, որը կարող եք ավելացնել, fileFilter հատկությունն է, որը կամընտիր ֆունկցիա է, որը կարող է վերահսկել, թե որ ֆայլերը վերբեռնվեն: Այս գործառույթը կանչվում է յուրաքանչյուր ֆայլի համար, որը մշակվում է: Այս ֆունկցիան ընդունում է նույն պարամետրերը, ինչ ֆայլի անուն ֆունկցիան՝ req, ֆայլ և cb:

Ձեր ծածկագիրը ավելի մաքուր և բազմակի օգտագործելի դարձնելու համար դուք կվերացնեք զտման ողջ տրամաբանությունը ֆունկցիայի մեջ:

Ստորև բերված կոդի բլոկը ավելացրեք ձեր app.js ֆայլին՝ ֆայլերի զտման տրամաբանությունն իրականացնելու համար.

const path = require("path");
const checkFileType = function (file, cb) {
  //Allowed file extensions
  const fileTypes = /jpeg|jpg|png|gif|svg/;
  //check extension names
  const extName = fileTypes.test(path.extname(file.originalname).toLowerCase());
  const mimeType = fileTypes.test(file.mimetype);
  if (mimeType && extName) {
    return cb(null, true);
  } else {
    cb("Error: You can Only Upload Images!!");
  }
};

checkFileType ֆունկցիան ընդունում է երկու պարամետր՝ ֆայլ և cb:

Վերևի կոդի բլոկում դուք սահմանել եք fileTypes փոփոխական, որը պահում է ռեգեքս արտահայտությունը պատկերի ֆայլի թույլատրված ընդարձակմամբ: Հաջորդը, դուք կանչեցիք փորձարկման մեթոդը regex արտահայտության վրա:

փորձարկման մեթոդը ստուգում է անցած տողի համընկնումի առկայությունը և վերադարձնում է true կամ false՝ կախված նրանից, թե արդյոք համընկնում է այն: Այնուհետև բեռնված ֆայլի անունը, որը կարող եք մուտք գործել file.originalname-ի միջոցով, փոխանցում եք ուղու մոդուլի extname մեթոդին, որը վերադարձնում է լարային ուղու ընդլայնումը դրան: Վերջապես, դուք կապում եք JavaScript toLowerCase տողային ֆունկցիան արտահայտությանը, որպեսզի պատկերները մշակվեն իրենց ընդլայնման անուններով մեծատառով:

Միայն ընդլայնման անունը ստուգելը բավարար չէ, քանի որ ընդլայնման անունները հեշտությամբ կարելի է խմբագրել: Ապահովելու համար, որ միայն պատկերներ են վերբեռնվում, դուք նույնպես պետք է ստուգեք MIME-ի տեսակը: Դուք կարող եք մուտք գործել ֆայլի mimetype հատկությունը file.mimetype-ի միջոցով: Այսպիսով, դուք ստուգում եք mimetype հատկությունը՝ օգտագործելով test մեթոդը, ինչպես արեցիք ընդլայնումների անունների համար:

Եթե երկու պայմանները վերադառնում են ճշմարիտ, դուք վերադարձնում եք հետ կանչը null և true, կամ վերադարձնում եք հետկանչը սխալով:

Ի վերջո, դուք ավելացնում եք fileFilter հատկությունը ձեր multer-ի կազմաձևում:

const upload = multer({
  storage: storageEngine,
  limits: { fileSize: 10000000 },
  fileFilter: (req, file, cb) => {
    checkFileType(file, cb);
  },
});

Քայլ 4. Multer-ի օգտագործումը որպես Express Middleware

Հաջորդը, դուք պետք է գործադրեք երթուղիների մշակիչներ, որոնք կկարգավորեն պատկերների վերբեռնումները:

Multer-ը կարող է կարգավորել ինչպես մեկ, այնպես էլ մի քանի պատկերների վերբեռնում՝ կախված կոնֆիգուրացիայից:

Ստորև բերված կոդի բլոկը ավելացրեք ձեր app.js ֆայլում՝ առանձին պատկերների վերբեռնման համար երթուղի մշակող ստեղծելու համար:

app.post("/single", upload.single("image"), (req, res) => {
  if (req.file) {
    res.send("Single file uploaded successfully");
  } else {
    res.status(400).send("Please upload a valid image");
  }
});

Վերևի կոդի բլոկում դուք կանչել եք մեկ մեթոդը upload փոփոխականի վրա, որը պահպանում է ձեր multer կազմաձևումը: Այս մեթոդը վերադարձնում է միջին ծրագիր, որը մշակում է «մեկ ֆայլ»՝ կապված տվյալ ձևի դաշտի հետ: Այնուհետև դուք փոխանցեցիք պատկերը որպես ձևի դաշտ:

Ի վերջո, ստուգեք, արդյոք ֆայլը վերբեռնվել է req օբյեկտի միջոցով file հատկության մեջ: Եթե դա եղել է, դուք հաջողության հաղորդագրություն եք ուղարկում, հակառակ դեպքում՝ սխալի հաղորդագրություն:

Ստորև բերված կոդի բլոկը ավելացրեք ձեր app.js ֆայլում՝ բազմաթիվ պատկերների վերբեռնման համար երթուղի մշակող ստեղծելու համար:

app.post("/multiple", upload.array("images", 5), (req, res) => {
  if (req.files) {
    res.send("Muliple files uploaded successfully");
  } else {
    res.status(400).send("Please upload a valid images");
  }
});

Վերևի կոդի բլոկում դուք կանչել եք զանգված մեթոդը upload փոփոխականի վրա, որը պահում է ձեր multer կազմաձևումը: Այս մեթոդը վերցնում է երկու արգումենտ՝ դաշտի անուն և առավելագույն քանակ, և վերադարձնում է միջին ծրագիր, որը մշակում է նույն դաշտի անունը կիսող բազմաթիվ ֆայլեր: Այնուհետև դուք փոխանցեցիք պատկերները որպես ընդհանուր ձևի դաշտ և 5-ը՝ որպես միանգամից վերբեռնվող պատկերների առավելագույն քանակը:

Մուլտերի օգտագործման առավելությունները

Ձեր Node.js հավելվածներում Multer-ի օգտագործումը հեշտացնում է պատկերները ուղղակիորեն ձեր սերվերում վերբեռնելու և պահելու այլապես բարդ գործընթացը: Multer-ը հիմնված է նաև busboy-ի՝ Node.js մոդուլի վրա՝ մուտքային ձևի տվյալները վերլուծելու համար, ինչը շատ արդյունավետ է դարձնում ձևի տվյալները վերլուծելու համար: