Мотивация
Каждый раз, когда мы загружаем изображение на сервер NodeJS, есть много возможностей, что нам также нужно оптимизировать или изменить размер изображения или и то, и другое, поэтому я создал простой пакет для обработки обеих операций одновременно под названием sharp-multer.
Введение
Multer : Multer — это промежуточное программное обеспечение Express.js, которое используется для обработки multipart/form-data, что в основном используется для загрузки файлов.
Sharp : Sharp — это скоростной модуль Node.js, предназначенный для преобразования больших изображений в распространенных форматах в более мелкие, удобные для использования в Интернете изображения JPEG, PNG, WebP, GIF и AVIF различных размеров.
Sharp-Multer : Node js Utilty пакет для использования с 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.
destination : вы можете вернуть любой каталог, в котором хотите хранить изображение, убедитесь, что каталог создан.
imageOptions : мы можем передать размер высоты, ширины для изменения размера, а также качество и формат файла (jpg,wep,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
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="avatar">
</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.
О дополнительных опциях и водяных знаках читайте в следующей части.
Спасибо, что прочитали, попробуйте один раз 😃