Загрузка изображений в Cloudinary с помощью Multer и ExpressJS | автор Окпукоро Джо | Середина
Загрузка файлов стала обычной функцией в каждом веб-приложении, многие учебные пособия, которые вы найдете в Интернете, показывают только то, как вы можете загружать файлы в базу данных вашего приложения, и вы застреваете, когда пытаетесь загрузить свои изображения в облако. такой сервис, как Cloudinary и Amazon S3. В ходе этого урока мы будем использовать Cloudiary для хранения наших изображений, затем мы сохраним ссылку на это изображение в нашей базе данных вместо всего буфера изображения.
В этой статье я покажу, что делают Cloudinary и Multer, и как легко с ними работать, работаете ли вы над API для одностраничного приложения или создаете монолитное приложение, которое вы рассмотрели в этом руководстве.
Прежде чем мы продолжим, я настроил пустое приложение ExpressJS с поддержкой ES6+, чтобы мы могли больше сосредоточиться на функции загрузки файлов, вы можете получить к ней доступ из здесь.
Давайте начнем с того, что сначала узнаем об использовании 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 с блоком кода ниже.
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, которое в основном используется для загрузки файлов. Это написано поверх официант для максимальной эффективности.
Зачем это нужно?
Из коробки NodeJS не умеет обрабатывать какие-то данные, например, мы хотели, чтобы наше приложение обрабатывало JSON-запросы, пришлось body-parse, в данном случае, multer позволяет приложению принимать данные формы, что позволяет нам легко переносить файлы из браузера на наш сервер.
Без multer, когда вы отправляете файлы на свой сервер, объект тела запроса (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, у нас может не быть административных привилегий для записи файлов на удаленный компьютер, что может привести к сбою всего нашего приложения.multer.memoeryStorage() сообщает multer, что мы сначала сохраним файл в памяти, которым можно манипулировать для любых целей.multer({ storage }).single('image'); устанавливает параметр хранилища, который мы будем использовать в приложении, в то время как .single('image'); указывает имя поля, к которому должен обращаться multer при поиске файла.
Теперь все готово, давайте попробуем использовать multer и Cloudinary для загрузки изображения.
Импортируйте multerUploads на свой сервер/index.js и добавьте следующий блок кода в ваш server/index.js файл
app.post('/upload', multerUploads, (req, res) => {
console.log('req.body :', req.body);
});
Теперь откройте postman в разделе тела выберите forma-data и введите field name вы использовали в своей конфигурации multer, которая в нашем случае была image. Ваш почтальон должен выглядеть так, теперь нажмите «Отправить».
Обратите внимание, что он записывает в консоль пустой объект.
Теперь по имени поля "image"измените тип textto file так же, как на скриншоте выше, у вас должно получиться что-то похожее на это.
В маршруте загрузки измените console.log(‘req.body :’, req.body); к console.log('req.file : ' req.file); вернитесь к почтальону и выберите изображение, нажмите кнопку отправки, и у вас должно получиться что-то вроде этого
Поздравляем, мультер теперь работает как middlewareмы можем пойти дальше и использовать его во всем нашем приложении, но ради этой статьи мы будем вызывать multer только для тех маршрутов, которые нам нужны.
Но я хочу, чтобы вы заметили, что файл поступает в виде буфера, потому что мы помещаем его в память, прежде чем сможем загрузить его в Cloudinary, что создает для нас проблему, поскольку загрузчик Cloudinary либо ожидает путь к файлу, либо строку, но мы получаем буфер от multer.
Итак, давайте конвертируем буфер в формат, понятный загрузчику Cloudinary, мы собираемся использовать пакет 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
Снова откройте почтальон, выберите файл и нажмите «Отправить», вы должны получить это сообщение.
теперь вы можете сохранить URL-адрес изображения в своей базе данных.
Поздравляем, вы только что научились загружать файлы в Cloudinary с помощью multer.
Я надеюсь, что это было полезно, пожалуйста, оставьте свои мысли в разделе комментариев ниже.
