Загрузка изображений в Cloudinary с помощью Multer и Expressjs

Загрузка файлов стала обычной функцией в каждом веб-приложении, многие учебники, которые вы найдете в Интернете, покажут вам только, как вы можете загружать файлы в базу данных вашего приложения, и вы застреваете, когда пытаетесь загрузить свои изображения в облако. такие сервисы, как Cloudinary и Amazon S3. В ходе этого руководства мы будем использовать Cloudiary для хранения наших изображений, а затем сохраним ссылку на это изображение в нашей базе данных вместо всего буфера изображений.

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

Прежде чем продолжить, я создал пустое приложение ExpressJS с поддержкой ES6 +, чтобы мы могли больше сосредоточиться на функции загрузки файлов , вы можете получить к нему доступ из здесь.

Начнем с того, что узнаем, как использовать Cloudinary.

Что такое Cloudinary

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

Вы можете легко загружать изображения в облако, автоматически выполнять интеллектуальные манипуляции с изображениями без установки какого-либо сложного программного обеспечения. Затем все ваши изображения беспрепятственно доставляются через быструю CDN, оптимизируют и используют лучшие отраслевые практики.

Cloudinary предлагает комплексные API-интерфейсы и возможности администрирования и легко интегрируется с новыми и существующими веб-приложениями и мобильными приложениями.
Подробнее об облачных вычислениях можно узнать здесь

Для начала создайте / войдите в свою учетную запись Cloudinary, на панели управления вы должны увидеть такие данные своей учетной записи.

В корневом каталоге вашего приложения есть файл sample.env, содержащий все переменные среды, которые мы будем использовать для этого приложения. Вы должны увидеть что-то подобное.

Создайте .env файл в корневом каталоге вашего приложения, скопируйте все имена переменных и замените значения своей информацией Cloudinary.
Давайте установим пакет Cloudinary, который позволит нам взаимодействовать с Cloudinary API npm install cloudinary.

Теперь, чтобы завершить процесс установки Cloudinary, в вашем server/ каталоге создайте папку config/ и файл с именем cloudinaryConfig.js. Этот каталог будет содержать конфигурацию, необходимую для загрузки файлов в Cloudinary. Когда вы закончите, ваш каталог должен выглядеть так.

В файле cloudinaryConfig.js настройте пакет для использования наших учетных данных Cloudinary с блоком кода ниже.

import { config, uploader } from 'cloudinary';
const cloudinaryConfig = () => config({
cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
api_key: process.env.CLOUDINARY_API_KEY,
api_secret: process.env.CLOUDINARY_API_SECRET,
});
export { cloudinaryConfig, uploader };

Большой!!! Cloudinary успешно настроен в вашем приложении, теперь мы можем приступить к загрузке файлов с помощью multer.

Что такое Мультер?

npm i multer

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

Зачем это нужно?
Изначально NodeJS не знает, как обрабатывать какие-либо данные, например, мы хотели, чтобы наше приложение обрабатывало запросы JSON, нам пришлось body-parse, в этом case, `multer` позволяет приложению принимать form-data, что позволяет нам легко переносить файлы из браузера на наш сервер.

Без multer, когда вы отправляете файлы на свой сервер, request body object(req.body) будет пустым. Multer обеспечивает доступность данных, которые вы отправляете из формы, а также создает объект req.file, который дает нам доступ к файловому буферу, который мы только что загрузили со стороны клиента.

Теперь давайте настроим Multer как промежуточное программное обеспечение, которое мы можем использовать с любым маршрутом, который должен загружать изображение. В папке промежуточного программного обеспечения создайте файл multer.js со следующей конфигурацией.

import multer from ‘multer’;
const storage = multer.memoryStorage();
const multerUploads = multer({ storage }).single(‘image’);
export { multerUploads };

Обратите внимание, что мы используем хранилище памяти вместо того, чтобы сначала записывать файл в каталог upload/, это связано с тем, что при развертывании нашего приложения в Heroku у нас может не быть adminitrative привилегий для записи файлов на удаленный компьютер, что может привести к сбою всего нашего приложения. заявление.

multer.memoeryStorage() сообщает multer, что сначала мы сохраним файл в памяти, которой можно будет управлять для любых целей.

multer({ storage }).single('image'); задает параметр хранения, который мы будем использовать в приложении, а .single('image'); указывает имя поля, которое multer должно переходить при поиске файла.

Теперь все готово, давайте попробуем использовать multer и Cloudinary для загрузки изображения.

Импортируйте multerUploads на свой server/index.js и добавьте следующий блок кода в свой server/index.js файл

app.post('/upload', multerUploads, (req, res) => {
console.log('req.body :', req.body);
});

Теперь откройте postman в разделе body, выберите forma-data и введите имя поля, которое вы использовали в своем multer configuration, которое в нашем случае было image. Ваш postman должен выглядеть так, теперь нажмите "Отправить".

Обратите внимание, что на консоли регистрируется пустой объект.

Теперь на fieldname "image" измените type text на file, как на скриншоте выше, у вас должно получиться что-то похожее на это.

В маршруте загрузки измените console.log (‘req.body:’, req.body); на console.log('req.file : ' req.file); вернитесь к postman, выберите изображение, нажмите кнопку отправки, и у вас должно получиться что-то вроде этого

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

Но я хочу, чтобы вы заметили, что файл поступает как buffer, потому что мы помещаем его в память, прежде чем мы сможем загрузить его в Cloudinary, что создает для нас проблему, поскольку Cloudinary uploader либо ожидает путь к файлу, либо string, но мы получаем buffer от multer.

Итак, давайте преобразуем буфер в формат, который поймет Cloudinary uploader, мы собираемся использовать пакет datauri.

Что такое URI данных?

URI данных - это строка в кодировке base64, представляющая файл. Получение содержимого файла в виде строки означает, что вы можете напрямую встроить данные в свой код HTML или CSS. Когда браузер обнаруживает URI данных в вашем коде, он может декодировать данные и создать исходный файл. "Учить больше"

npm i datauri, чтобы добавить пакет, а затем обновите свою multer настройку, чтобы она выглядела следующим образом.

import multer from 'multer';
import Datauri from 'datauri';
import path from 'path';
const storage = multer.memoryStorage();
const multerUploads = multer({ storage }).single('image');
const dUri = new Datauri();
/**
* @description This function converts the buffer to data url
* @param {Object} req containing the field object
* @returns {String} The data url from the string buffer
*/
const dataUri = req => dUri.format(path.extname(req.file.originalname).toString(), req.file.buffer);
export { multerUploads, dataUri };

В приведенной выше функции dataUri мы передаем объект запроса, форматируем буфер и возвращаем строковый BLOB-объект.

Пришло время добавить загрузчик Cloudinary в приложение, но сначала давайте внесем некоторые изменения в функцию конфигурации. Лучше всего преобразовать его в промежуточное ПО, чтобы нам не приходилось вызывать его каждый раз, когда мы хотим использовать настройки Cloudinary.

Ваша новая конфигурация Cloudinary должна выглядеть так.

import { config, uploader } from 'cloudinary'
import dotenv from 'dotenv';
dotenv.config();
const cloudinaryConfig = (req, res, next) => {
config({
cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
api_key: process.env.CLOUDINARY_API_KEY,
api_secret: process.env.CLOUDINARY_API_SECRET,
});
next();
}
export { cloudinaryConfig, uploader };

Обратите внимание, что я добавил новый пакет под названием dotenv, он позволяет нам загружать настройки из нашего .env файла в процесс приложения узла.

npm i dotenv, обновите свой server/index.js, чтобы он выглядел так.

import express from 'express';
import { urlencoded, json } from 'body-parser';
import { resolve } from  'path';
import { uploader, cloudinaryConfig } from './config/cloudinaryConfig'
import { multerUploads, dataUri } from './middlewares/multerUpload';
const app = express();
const Port = process.env.PORT || 3000;
app.use(express.static(resolve(__dirname, 'src/public')));
app.use(urlencoded({ extended: false }));
app.use(json());
app.use('*', cloudinaryConfig);
app.get('/*', (req, res) => res.sendFile(resolve(__dirname, '../public/index.html')));
app.post('/upload', multerUploads, (req, res) => {
if(req.file) {
const file = dataUri(req).content;
return uploader.upload(file).then((result) => {
const image = result.url;
return res.status(200).json({
messge: 'Your image has been uploded successfully to cloudinary',
data: {
image
}
})
}).catch((err) => res.status(400).json({
messge: 'someting went wrong while processing your request',
data: {
err
}
}))
}
});
app.listen(Port, () => console.log(`Server started at http://localhost:${Port}`));

Снова откройте postman, выберите файл и нажмите "Отправить". Должно появиться это сообщение.

Теперь вы можете сохранить URL-адрес изображения в своей базе данных.

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

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

Ссылка на это репо