Автор оригинала: Jehonadab Okpukoro.
Загрузка файлов стала общей функцией в каждом веб-приложении, многие учебные пособия, которые вы найдете в Интернете, только покажет вам, как вы можете загружать файлы в базу данных вашего приложения, и вы застреваете, когда вы пытаетесь загрузить свои изображения в облако Сервис, как Doubrary и Amazon S3. Во время этого учебника мы будем использовать Compariary для хранения наших изображений, мы будем сохранять ссылку на это изображение в нашей базе данных вместо всего буфера изображения.
В этой статье я покажу, что делает Doubaliary and Multer и насколько легко работать с ними, независимо от того, работаете ли вы на API для приложения для одной страницы, или построение монолитной приложения. Это учебное пособие.
Прежде чем мы продолжим, я настроил пустое приложение ExpressJS с поддержкой ES6 +, чтобы мы могли больше фокусироваться на функции загрузки файла, вы можете получить доступ к нему из здесь Отказ Давайте начнем с первого знания использования обладаний.
Что такое обладание
Countrary – это концептуальное решение для управления изображениями для вашего сайта и мобильных приложений. Главальное покрывает все из загрузки изображения, хранения, манипуляций, оптимизаций к доставке. Вы можете легко загружать изображения в облако, автоматически выполнять манипуляции Smart Image без установки любого сложного программного обеспечения. Все ваши изображения затем легко доставляются через быструю CDN, оптимизированную и используя лучшие практики отрасли. Countrarial предлагает комплексные возможности API и администрирования и легко интегрируются с новыми и существующими веб-мобильными приложениями. Вы можете узнать больше о County здесь
Чтобы начать, создать/подписать в вашу облачность учетная запись На вашей приборной панели вы должны увидеть данные вашей учетной записи, как это.
В корневом каталоге вашего приложения есть файл образец.env, который содержит все переменные среды, мы будем использовать для этого приложения. Вы должны увидеть что-то вроде этого. Создайте файл .env в корневом каталоге вашего приложения, скопируйте все имена переменной и замените значения вашей облачной точки зрения. Давайте установим облачный пакет, который позволит нам интерфейс с помощью облачно установки NPM API NPM. Теперь, чтобы завершить процесс обладанной установки, на вашем сервере/каталоге, создайте конфигурацию/папку и файл с именем CountraryConfig.js. Этот каталог будет содержать конфигурацию, вам нужно загрузки файлов в Countrary. Когда вы закончите, ваш каталог теперь должен выглядеть так.
На cloudaryConfig.js Файл, настройте пакет для использования наших облачных учетных данных с блоком кода ниже.
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 };
Большой!!! Countrary Countrary был успешно настроен в вашем приложении, теперь мы можем перейти к загрузке файлов с помощью MULTER.
Что такое мультер?
NPM I Multer
Multer – это промежуточное программное обеспечение Node.js для обработки мультипартаторов/форм-данных, которая в основном используется для загрузки файлов. Это написано на вершине Busboy для максимальной эффективности.
Почему это нужно?
Вне коробки Nodejs не знает, как обрабатывать любые данные, например, мы хотели, чтобы наше приложение обрабатывало запросы JSON, нам пришлось разбираться в тело, в этом случае Малтер позволяет приложению принимать данные, которые позволяют нам легко транспортные файлы из браузера на наш сервер. https://www.npmjs.com/package/multer.
Без Малтер , Когда вы отправляете файлы на свой сервер, объект Body Code (REQ .body) будет пустым. MULTER позволяет получать данные, которые вы отправляете из формы, который будет доступен, и она также создает объект Req.file, который дает нам доступ к буферу файлов, который мы только что загружены с нагрузки с клиента. Теперь давайте настроим Multer в качестве промежуточного программного обеспечения, которое мы можем использовать с любым маршрутом, который необходимо загрузить изображение. В папке промежуточного программного обеспечения создайте файл Multer.js со следующей конфигурацией.
import multer from 'multer';
const storage = multer.memoryStorage();
const multerUploads = multer({ storage }).single('image');
export { multerUploads };
Обратите внимание, что мы используем память памяти вместо сначала написания файла в Загрузить/ Каталог, это потому, что когда мы развертываем наше приложение к Heroku, у нас может не иметь административных привилегий для записи файлов на удаленный компьютер, который может сбиться нашего приложения. multer.mehoerystorage () Сообщает Multer, что мы сохраним файл в память, которые могут быть манипулируемыми в костюм любым целям. Multer ({Storage}). Одноместный ('image'); Устанавливает вариант хранения, мы будем использовать на приложении, пока .single («изображение»); Определяет имя поля MULTER должен идти, когда он ищет файл. Теперь все это настроен, давайте попробуем использовать MULTER и HELORALION, чтобы загрузить изображение. Импортируйте Multeruploads на свой сервер/index.js и добавьте следующий блок кода для вашего Сервер/index.js файл
app.post('/upload', multerUploads, (req, res) => {
console.log('req.body :', req.body);
});
Теперь открыть почтальон На секции тела выберите Forma-data и введите Имя поля Вы использовали в вашей конфигурации малтера, которая в нашем случае была имиджем. Ваш почтальон должен выглядеть так, теперь нажмите на отправку.
Обратите внимание, что он регистрирует пустой объект на консоли.
Теперь на поле поле «Изображение» , измените текст типа в файл так же, как на скриншоте выше, у вас должно быть что-то похожее на это.
На маршруте загрузки изменить Console.log ('req.body:', req.body); к Console.log ('req.file:' req.file); Вернитесь к Postman и выберите изображение, нажмите кнопку отправки, и вы должны иметь что-то подобное
Поздравляем Multer сейчас работает как промежуточное программное обеспечение Мы можем идти вперед и использовать его на всю нашу приложение, но ради этой статьи мы позвоним только Multer на маршрутах, которые нам нужны. Но я хочу, чтобы вы заметили, что файл идет как буфер, потому что мы нажимаем его в память, прежде чем мы сможем загрузить его в Countrarial, что представляют проблему для нас, поскольку обладающий Diumbile Uploys, либо ожидает, что путь к файлу или строку, но Мы получаем буфер от Multer.
Итак, давайте конвертируем буфер в формат, который поймет облачный загрузчик, мы собираемся использовать пакет TheDatauri.
Что такое данные 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 String. Пришло время добавить облачный загрузчик на приложение, но сначала давайте сделаем некоторую модификацию в функции конфигурации, лучшее, что мы преобразуем его на промежуточное программное обеспечение, чтобы нам не приходилось вызывать его каждый раз, когда мы хотим использовать облачные настройки. Ваш новый облачный конфиг должен выглядеть таким.
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 };
Обратите внимание, что добавил новый пакет под названием Доценв Это позволяет нам загрузить настройки на наших .env Файл в процесс приложения узла. NPM I Dotenv обновите свой Сервер/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}`));
Откройте почтальон снова, выберите файл и нажмите Отправить, вы должны получить это сообщение
Теперь вы можете сохранить URL-адрес изображения в вашу базу данных. Поздравляем, вы просто узнаете, как загружать файлы в Countrary, используя MULTER. Я надеюсь, что это было полезно, пожалуйста, оставьте свои мысли в разделе комментариев ниже.