Загрузка и обработка изображений в AWS S3 с помощью Node JS с использованием Multer и Jimp

Статья будет лаконичной и включать только основную информацию. В основном это будут примеры кода из моего проекта.

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

Во-вторых, вам необходимо установить зависимость под названием Jimp. Библиотека обработки изображений для Node, полностью написанная на JavaScript, без собственных зависимостей.

Вы можете найти все инструкции по их установке, основные варианты использования и документацию по этим двум верхним ссылкам.

Загрузите изображения в NodeJS с помощью multer.

Шаг 1. Рассмотрение на стороне клиента

Отправка данных на сервер с включенным файлом изображения должна быть FormData. Итак, когда я собрал все данные из входных данных, я преобразовал их в FormData и добавил файл изображения, который я сохранил в локальном состоянии:

Шаг 2: рассмотрение на стороне сервера

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

AWS_BUCKET_NAME - имя вашего ведра S3;

AWS_ACCESS_KEY_ID и AWS_SECRET_ACCESS_KEY;

AWS_REGION - например, «us-west-2»;

AWS_Uploaded_File_URL_LINK - вы создаете сами, и он имеет формат: https: // s3- (ваш регион) .amazonaws.com / (название корзины)

Начнем собирать код:

Во-первых, вам нужно будет импортировать пакеты multer и AWS:

const multer = require('multer');
const AWS = require('aws-sdk');

После этого создайте мультимедийное хранилище, куда вы загрузите изображение в буфер:

const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

Когда вы отправляете запрос на загрузку фотографий, вам необходимо запустить промежуточное программное обеспечение multer:

router.post('/photos', upload.single('file'), async (req, res) => {
  const info = req.body;
  const image = req.file;
  // Your code here
}

Вся информация о ваших данных будет содержаться в req.body, поэтому вы можете извлечь ее оттуда, и ваше изображение будет в req.file со следующей структурой:

api_1       | Image {
api_1       |   fieldname: 'file',
api_1       |   originalname: 'cruise.jpg',
api_1       |   encoding: '7bit',
api_1       |   mimetype: 'image/jpeg',
api_1       |   buffer: <Buffer ff d8 ff e1 3d 1e 45 78 69 66 00 00 49 49 2a 00 08 00 00 00 08 00 0f 01 02 00 05 00 00 00 6e 00 00 00 10 01 02 00 09 00 00 00 74 00 00 00 1a 01 05 00 ... 15755535 more bytes>,
api_1       |   size: 15755585
api_1       | }

Теперь давайте создадим новый экземпляр S3 и параметры, которые нам понадобятся для загрузки файла:

let s3bucket = new AWS.S3({
  accessKeyId: process.env.AWS_ACCESS_KEY_ID,
  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
  region: process.env.AWS_REGION
});
const params = {
  Bucket: process.env.AWS_BUCKET_NAME,
  Key: image.originalname,
  Body: file,
  ContentType: image.mimetype,
  ACL: 'public-read'
};

И, наконец, загрузка файла в ведро:

s3bucket.upload(params, async (err, data) => {
  try {
    if (err) {
      res.status(500).json({ error: true, Message: err });
     } else {
       const newFileUploaded = {
         description: info.description,
         fileLink: s3FileURL + image.originalname,
         s3_key: params.Key
        };
    info = { ...info, photo: newFileUploaded.fileLink };
    const photos = await database.addPhoto(db, info);
    res.send(photos);
   }
  } catch (err) {
   res.status(500).json({ msg: 'Server Error', error: err });
  }
});

Обработка изображений в NodeJS с помощью Jimp.

Во-первых, вам нужно будет импортировать пакет Jimp:

const Jimp = require('jimp');

Наше изображение находится в буфере, где нам помог multer. Итак, нам нужно сначала прочитать:

const file = await Jimp.read(Buffer.from(image.buffer, 'base64'))

Вы получите Promise, после чего мы сможем обработать изображение так, как мы хотим, и сохранить его в переменной:

.then(async image => {
  const background = await Jimp.read('https://url/background.png');
  const font = await Jimp.loadFont(Jimp.FONT_SANS_32_WHITE);
  image.resize(Jimp.AUTO, 900);
  image.composite(background, 1000, 700);
  image.print(font, 1000, 700, 'Logo');
  return image.getBufferAsync(Jimp.AUTO);
})

Когда изображение будет обработано, вы можете загрузить его в AWS с помощью multer.

Полный код NodeJs вы можете найти ниже:

Надеюсь, эта информация может помочь вам, если вы запутались с работой с изображениями NodeJS, как я.