Рубрики
Без рубрики

Как позволить пользователям загружать изображения с узлом / Express, Mongoose и Countrary

Вы создаете приложение Full-Stack и хотите позволить пользователям загрузить изображение, но вы не уверены, как? По моему опыту, это всегда достигается, когда пользователи вводят ссылку и сохранение этой строки в вашу базу данных. Это отлично работает и быстро и легко, но это

Автор оригинала: FreeCodeCamp Community Member.

Вы создаете приложение Full-Stack и хотите позволить пользователям загрузить изображение, но вы не уверены, как? По моему опыту, это всегда достигается, когда пользователи вводят ссылку и сохранение этой строки в вашу базу данных. Это отлично работает и быстро и легко, но это тоже вроде мошенничество. Какое приложение заставляет вас сначала перейти на другой сайт и загружать свое изображение, а затем вернуться и ссылку на него?

Итак, что такое решение?

Разрешить пользователю вводить файл, а затем на свой сервер загрузить этот файл в облачную службу и сохранить это в своей базе данных. Главаральное отличное для этого. Это посвящено загружению СМИ. Имеет отличную документацию. Это позволяет преобразованиям. И Имеет огромный свободный план (10 ГБ хранилища). Вы можете подписаться на Главарное здесь (Я ничего не получаю для этого).

Давайте начнем на интерфейсе

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

Это передний интерфейс решен.

Задний конец

Теперь спиной – это то, где происходит вся магия. Вам понадобится все обычные зависимости для работы с Экспресс и Мангуст Отказ Кроме того, мы будем использовать Малтер , Главарное и Мюлтер-хранилище-облачный Отказ Multer позволит доступу к файлам, представленным через форму. Главальное использование для конфигурации и загрузки. Multer-Storage-Petubliary сделает процесс их простых.

const multer = require("multer");
const cloudinary = require("cloudinary");
const cloudinaryStorage = require("multer-storage-cloudinary");

Как только зависимости требуются, вам необходимо настроить их. Когда вы зарегистрируетесь в Countrary, вы будете предоставлены свои учетные данные API. Я рекомендую хранить их в файле «.env», чтобы сохранить их безопасным.

Ниже мы также:

  • Установка папки, чтобы сохранить все изображения, организованные на Houotheriary для этого проекта
  • Обеспечение только файлов “.jpg” и “.png” загружаются
  • Добавление преобразования для сохранения высоты и ширины, а также для управления размером файла.

Есть гораздо больше, вы можете сделать в отношении преобразований – вы можете посмотреть здесь если ты заинтересован.

cloudinary.config({
cloud_name: process.env.CLOUD_NAME,
api_key: process.env.API_KEY,
api_secret: process.env.API_SECRET
});
const storage = cloudinaryStorage({
cloudinary: cloudinary,
folder: "demo",
allowedFormats: ["jpg", "png"],
transformation: [{ width: 500, height: 500, crop: "limit" }]
});
const parser = multer({ storage: storage });

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

В вашем почтовом маршруте вы просто добавляете парсер, который мы настроили до промежуточного программного обеспечения. Это займет в файл, загрузите его до Countrary, и верните объект с информацией файла. Вы можете получить доступ к этой информации в объекте запроса.

Мне нравится извлекать только информацию, которую я хочу от этого, чтобы сохранить свою базу данных организованной. По крайней мере, вы захотите:

  • URL-адрес, который можно использовать для отображения изображения на переднем углу
  • public_id, который позволит вам получить доступ и удалить изображение из Countrary.
app.post('/api/images', parser.single("image"), (req, res) => {
  console.log(req.file) // to see what is returned to you
  const image = {};
  image.url = req.file.url;
  image.id = req.file.public_id;
  Image.create(image) // save image information in database
    .then(newImage => res.json(newImage))
    .catch(err => console.log(err));
});

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

* Изображение является примером заполнителя для вашей коллекции базы данных. Замените его самостоятельно.

Отображение изображения

Когда вы хотите отобразить изображение на внешнем интерфейсе, выполните запрос базы данных, а затем используйте URL-адрес в теги изображения />.

Я надеюсь, что это поможет вам добавлять этого немного дополнительных на ваших сайтах. Это не так сложно, как только вы сломаете каждый шаг в процессе. Это даст вашему сайту профессиональное прикосновение и сделает его выделиться.

Если у вас есть какие-либо вопросы, пожалуйста, попросите в комментариях.

Читайте ещё по теме: