Поиск по сайту:

Как загружать изображения с помощью бэкенда Node.js в Multer и Express

Введение

Хотя вы можете загружать изображения во внешнем интерфейсе, вам потребуется реализовать API и базу данных на бэкэнде для их получения. С помощью Express, платформы Node.js, вы можете установить загрузку файлов и изображений в одном параметре.

В этой статье вы узнаете, как загружать изображения с серверной частью Node.js, используя Multer и Express.

Предпосылки

  • Рекомендуется понимание Node.js. Чтобы узнать больше о Node.js, ознакомьтесь с нашей серией статей «Как кодировать в Node.js».
  • Предлагается общее понимание методов HTTP-запросов в Express. Чтобы узнать больше о методах HTTP-запросов, ознакомьтесь с нашим учебником How To Define Routes and HTTP Request Methods in Express.

Шаг 1 — Настройка проекта

Поскольку Express — это платформа Node.js, перед выполнением следующих шагов убедитесь, что у вас установлен Node.js из Node.js. Запустите в терминале следующее:

Создайте новый каталог с именем node-multer-express для вашего проекта:

  1. mkdir node-multer-express

Перейдите в новый каталог:

  1. cd node-multer-express

Инициализируйте новый проект Node.js со значениями по умолчанию. Это будет включать ваш файл package.json для доступа к вашим зависимостям:

  1. npm init

Создайте файл ввода, index.js. Здесь вы будете обрабатывать свою логику Express:

  1. touch index.js

Установите Multer, Express и morgan в качестве зависимостей:

  1. npm install multer express morgan --save

Multer — это ваша библиотека загрузки изображений, которая управляет доступом к данным формы из экспресс-запроса. morgan — промежуточное ПО Express для регистрации сетевых запросов.

Применение Multer в вашем проекте

Чтобы настроить библиотеку Multer, используйте метод .diskStorage(), чтобы указать Express, где хранить файлы на диске. В файле index.js укажите Multer, объявите переменную storage и присвойте ей значение при вызове метода .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);
  }
});

Свойство destination метода diskStorage() определяет, в каком каталоге будут храниться файлы. Здесь файлы будут храниться в каталоге my-images. Если вы не применили destination, операционная система по умолчанию выберет каталог для временных файлов.

Свойство filename указывает, как назвать ваши файлы. Если вы не укажете имя файла, Multer вернет случайно сгенерированное имя для ваших файлов.

Примечание. Multer не добавляет расширения к именам файлов, поэтому рекомендуется возвращать имя файла вместе с расширением.

Завершив настройку Multer, давайте объединим его с вашим сервером Express.

Шаг 2 — Работа с экспресс-сервером

На вашем сервере Express вы обрабатываете логику для методов HTTP-запросов, методов жизненного цикла request и response, а также где вы можете реализовать зависимости Multer и morgan для передачи файлов и изображений. .

В файле index.js объявите переменную app и присвойте ее значение экземпляру Express. Require в Multer и morgan и объявите переменную upload для хранения экземпляра 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'));

Вы будете использовать промежуточное ПО Express, .use(), для передачи промежуточного ПО .json() для анализа входящих ответов в виде объекта JSON. Кроме того, .use() принимает вызов morgan и аргумент dev. Это говорит Express использовать среду разработки morgan для оповещения вас о статусе ответа. Чтобы создать статические файлы, передайте в промежуточном программном обеспечении Express .static() в .use() и укажите каталог, содержащий ваши изображения, в качестве аргумента.

После того, как вы установили свои глобальные переменные, установите запрос POST, который принимает анонимный маршрут, и обратный вызов req и response для получения новых файлов. и изображения:

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
    })
  }
});

Когда анонимный маршрут получает файл или изображение, Multer сохраняет их в указанный вами каталог. Второй аргумент в вашем запросе POST, upload.single() — это встроенный метод Multer для сохранения файла со свойством fieldname и сохраните его в объекте Express req.file. Свойство fieldname определено в вашем методе Multer .diskStorage().

Если вы интегрируете базу данных, вы можете запросить имя файла в файле index.js:

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

Сохраните переменную filePath в базе данных и работайте с базой данных с входящими именами файлов.

Заключение

Express предоставляет вам процесс для сохранения и хранения входящих файлов и изображений на вашем сервере. Зависимость промежуточного программного обеспечения Multer оптимизирует данные вашей формы для обработки нескольких загрузок файлов.

Если вы хотите узнать больше о Node.js, загляните на нашу тематическую страницу Node.js, где вы найдете упражнения и проекты по программированию.