Мотивация:

Каждый раз, когда мы загружаем изображение на сервер NodeJS, возникает множество возможностей, которые нам также необходимо оптимизировать или изменить размер изображения, или и то, и другое, поэтому я сделал простой пакет для одновременной обработки обеих операций, который называется Sharp-multer.

Введение :

Multer : Multer — это промежуточное ПО Express.js, которое используется для обработки multipart/form-data, которая в основном используется для загрузки файлов.

Sharp. Sharp high — это скоростной модуль Node.js, который преобразует большие изображения распространенных форматов в меньшие, удобные для Интернета изображения различных размеров в формате JPEG, PNG, WebP, GIF и AVIF.

Sharp-Multer: пакет утилит Node js для использования с Multer в качестве механизма хранения для оптимизации изображений на лету с помощью Sharp.

Установка и настройка:

  1. Создать приложение Node JS
mkdir test-app
cd test-app
npm init

2. Установить модули

npm install express multer --save
npm install sharp --save
npm install sharp-multer --save

3. Создайте файл Server.js и импортируйте модули

const express = require("express")
const path = require("path")
const multer = require("multer")
const SharpMulter  =  require("sharp-multer");
const app = express()

4. Настройте Sharp Multer для обработки изображений
Здесь мы создаем механизм хранения для Multer.
назначение: вы можете вернуть любой каталог, который вы хотите сохранить изображение, убедитесь, что каталог создан.
imageOptions: мы можем передать высоту и ширину размера для изменения размера, а также качество и формат файла (jpg, webp, png) в конвертировать входящее изображение для оптимизации.

const storage =  
 SharpMulter ({
              destination:(req, file, callback) =>callback(null, "images"),
              imageOptions:{
               fileFormat: "jpg",
               quality: 80,
               resize: { width: 500, height: 500 },
                 }
           });
const upload  =  multer({ storage });

5. Создание маршрута с помощью Multer Middleware

app.post("/upload", upload.single("avatar"), async  (req, res)  => {
console.log(req.file);
return  res.json("File Uploaded Successfully!");
}

6. Добавить файл HTML для отображения формы

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>File Upload</title>
</head>
<body>
    <div class="container">
        <h1>File Upload</h1>
<!--Create a form to send the file to a route  "upload"-->
<!--Set the request method to POST-->
<!--Set the encytype to "multipart/form-data" in order to send files and not just text-->
        <form action="/upload" method="POST" enctype="multipart/form-data">
            <div class="file-field input-field">
              <div class="btn grey">
                <input type="file" name="myImage">
              </div>
            </div>
            <button class="btn" type="submit">Submit</button>
          </form>
    </div>
</body>
</html>

7. Обслуживание файла и определение порта

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, '/index.html'));
});

app.listen(3000, () => {
  console.log(`Server is running on port ${3000}`)
})

8. Запуск сервера

node Server

После этого вы можете открыть свой браузер и начать загрузку изображений, которые будут автоматически оптимизированы и сохранены в месте назначения, которое вы указали при настройке Sharp multer.

Для предварительного изменения размера и водяного знака ознакомьтесь со следующей частью

Спасибо за прочтение попробуйте один раз 😃