Как да направите основен HTML формуляр за качване на файлове на вашия сървър с помощта на Multer в приложение Node.js / Express

Какво строим днес.

Наскоро реших да се спра на концепцията да позволя на потребителите на моето експресно уеб приложение да качват свои снимки в акаунта си за аватарите на профила си и продуктите, които ще качват. Ако искате да направите същото и обмисляте да използвате Node.js / Express, продължете да четете.

Как мисля, че моето приложение трябва да направи това
От задната страна искам да съхраня снимките им в решение за съхранение в облак и след това да съхранявам данни за техните изображения в моята база данни на MongoDB. (като например URL адреса, размера на файла, пропорциите на ширината и височината и други причудливи неща като общ шестнадесетичен формат на базовите цветове, които изображението съдържа, за да създадете невероятни инструменти за търсене)

ЗАБЕЛЕЖКА: Този урок обхваща само ЖЪЛТИТЕ части
Звучи достатъчно лесно, нали !? ... Bwahaha!

Сънувайки код ще напиша за това ...
А. Качете потребителски снимки в папка за временно съхранение на моя сървър (Какво обхваща този урок)
Потребителят качва снимка, моят бекенд я поставя в локална папка и предоставя URL адрес на това място за локално съхранение.

B. След това приложението ми прехвърля този файл в облака (използвайки AJAX)
Моят резервен сървър след това прави тази снимка и я поставя в облачно хранилище чрез AJAX заявка за публикуване с обратно извикване, което включва URL адреса на файла в облака.

В. Приложението ми получава URL адреса на местоположението в облака на снимката и след това публикува данните за снимката и моя потребител в моята база данни Mongo.
Когато това приключи, публикувам всички съотносими данни с този URL адрес в базата данни на моето приложение - и правя всякакви страхотни магии!

Включени в този урок

След проверка и вземане на проби (твърде много безполезни) решения, докато стреса ядеше бисквитки с шоколадов чип, най-накрая попаднах на пример, който всъщност работи за част А от този код мечта, която имам, и така се принудих да напиша този урок за всички останали ние онлайн стресираме яде бисквитки и искаме да разрешим това.

  • Приказна връзка към демо репото ми от github!
    https://github.com/Lazercat/node-express-file-form-upload-demo
  • Внимателно очакване, че вече знаете как да създадете / конфигурирате уеб приложение node.js / express.
  • Искрящ отказ от това как това включва само много основно полиране на файлове и вие сте отговорни (както обикновено) за прилагането на вашите собствени решения за сигурност. Това решение работи, но не твърдя, че съм експерт по сигурността.
  • фантастични скрийншоти и размирен кодов преглед на това, което изграждаме!

Използване на файла ми с демонстрационен проект (като шеф)

1FORK / CLONE
Преминете към github и клониране или вилица / клонинг… (ако искате да ми помогнете да го направя по-добър, (да, моля!))… Моето демо хранилище за това решение. https://github.com/Lazercat/node-express-file-form-upload-demo.

2INSTALL НПМ ПАКЕТИ
 След като се клонира локално, стартирайте npm install от вашия команден ред (bash / terminal) в основната папка, където е App.js.

npm инсталиране

3 РАБОТИ ПРИЛОЖЕНИЕТО
 Включих пакета nodemon в този проект, така че за да стартирате това решение на вашия localhost, просто въведете следния код. Докато правите промени, nodemon автоматично ще го стартира отново -ато, а?

nodemon App.js

4 Посетете http: // localhost: 3000 във вашия уеб браузър, за да проверите това горещо решение за пушачи!

Нека разгледаме зависимостите на приложението! (като глупак)

Част 1) ВАШИТЕ APP.JS SERVER зависимости и основна настройка.

/ * App.js файл * /
// РАБОТИ ПЪРВИ
  const express = изисквам ('express'); // приложения рутер
  const multer = изисквам ('multer'); // файл за съхранение на междинен софтуер
  const bodyParser = изисквам ('body-parser'); // почиства нашите req.body
// НАСТРОЙКА ЗА НАСТРОЙКА
  const app = express (); // Това е експресно приложение
  const port = process.env.PORT || 3000; // предварително конфигурирайте вашия порт!
  app.use (bodyParser.urlencoded ({удължен: фалшива})); // обработвайте заявки за тяло
  app.use (bodyParser.json ()); // нека и JSON да работи!
  app.use ('/', express.static (__ dirname + '/ public'));
// нека обявим публична статична папка,
// тук отиват статичните файлове / изход от страна на клиента
  1. Експрес - прекрасен експрес, невероятно бърз уеб рамков пакет, който предоставя нашето решение за маршрутизиране в това демонстрация. не забравяйте да го включите, както е показано по-горе, и да настроите приложението си да = express.
    Официална документация: https://www.npmjs.com/package/express
  2. Multer - пакет от възли за обработка на enpartype-данни / multi-data / data-data (nerd жаргон за html форма, който изпраща файлове), както и гайките и болтовете на това решение!
     Официална документация: https://www.npmjs.com/package/multer
  3. Body Parser - Този невероятно прекрасен инструмент почиства и подготвя обекта req.body, преминат през нашите маршрути (и форма) и улеснява живота ни!
    Официална документация: https://www.npmjs.com/package/body-parser

Конфигуриране на Multer (като урок от YouTube, който намерих)

Причината всичко това да е възможно е поради следния код, повече от другите основи, през които ще ви разгледам. Моето вдъхновение за тази публикация е уеб програмистът Ашиш Мехра, който предоставя отлична информация и след това ето тук (https://www.youtube.com/watch?v=sMnqnvW81to&lc=z23htp54jwmhwni0nacdp43axbwhgu3y3fg0jwzwhatw03c010c).

Това успях да реализирам заради страхотните открития на Ашиш.

/ * във App.js файл * /
// MULTER CONFIG: за получаване на файлови снимки за съхранение на темп сървъра
const multerConfig = {
    
съхранение: multer.diskStorage ({
 // Настройка, където ще отиде файлът на потребителя
 дестинация: функция (req, файл, следващ) {
   следващ (null, './public/photo-storage');
   }
    
    // След това дайте на файла уникално име
    име на файл: функция (req, файл, следващ) {
        console.log (файл);
        const ext = file.mimetype.split ('/') [1];
        следващ (null, file.fieldname + '-' + Date.now () + '.' + ext);
      }
    }),
    
    // Средство за осигуряване на качване само на изображения.
    fileFilter: функция (req, файл, следващ) {
          ако (! файл) {
            следващия();
          }
        const image = file.mimetype.startsWith ('изображение /');
        ако (изображение) {
          console.log („качена снимка“);
          следващ (нула, вярно);
        } Друг {
          console.log ("файлът не се поддържа");
          
          // TODO: По-добър отговор на съобщение до потребителя при отказ.
          връщане следващ ();
        }
    }
  };

HTML формулярът

Какво прави добра форма за качване на файл? Отговор - такъв, който всъщност може да се справи. Вашият типичен html формуляр се използва за обработка на данни, а не на документи. За да получите файл за публикуване, се нуждаете от две критични неща за настройка, също показани в код с голи кости по-долу:

  1. променете ентетипа на формата на „multipart / form-data“, тип кодиране, с който Multer се справя много добре.
  2. дайте си метод = “POST”
    (нещо като дадено, но важно за нашия успех.)
  3. Действие, което публикува в маршрут действие = ”/ качване” (повече за това по-долу)
  4. има HTML вход с type = "файл" И име = "снимка"

 
       

Рутерът

Нека завършим тази прекрасна ситуация, като обработваме маршрута / контролера за мястото, където сървърът натиска този код, Специален трик: докато се обаждате на multerConfig! (виж маршрут 2 по-долу).

/ * в App.js файл * /
// Маршрут 1: обслужване на началната страница
app.get ('/', функция (req, res) {
    res.render ( "index.html);
});
// Маршрут 2: обслужвайте решението за обработка на файлове (наистина се нуждае от по-добро решение за отговор на потребителя. Ако опитате да качите нещо, освен изображение, той все още ще каже „завършен“, но всъщност няма да го качите. Останете тук за по-добро решение или още по-добре, създайте свой собствен вилица / клонинг и го изтеглете обратно, за да можем да направим това нещо по-добре заедно за всички, които се борят с него.
app.post ( "/ качване", multer (multerConfig) .Една ( "снимка") функция (REQ, ВЕИ) {
   res.send ( "Complete!");
});
// Моля, обърнете внимание на извикванията на метода .single („снимка“) и тази „снимка“ е името на нашето поле за въвеждане на тип файл!

Сървърът

Е ... това уеб приложение няма да работи, ако няма такова. Така че хиг!

/ * във App.js файл * /
app.listen (порт, функция () {
    console.log (`Сървърно слушане на порт $ {port}`);
});

Изходът / решението (накрая ..)

Вземете пуканките и бъдете хипнотизирани от тези екрани!

Потребителят избира файла, за да зареди снимка, след което кликва върху „Качване на снимка“Съобщение за потвърждение, върнато с res.send от рутера.Вижте тези страхотни снимки, които се качват на вашия локален сървър!