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

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

Позвольте пользователю ввести файл, а затем на сервере загрузите этот файл в облачную службу и сохраните в своей базе данных. Cloudinary отлично подходит для этого. Он предназначен для загрузки медиа. Имеет отличную документацию. Это позволяет производить трансформации. И имеет огромный бесплатный план (10 Гб памяти). Вы можете зарегистрироваться на Cloudinary здесь (я ничего не получаю за это).

Начнем с интерфейса

<form action='/api/images' method="post" enctype="multipart/form-data">
  <input type="file" name="image" />
</form>

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

Это передняя часть решена.

Бек-энд

Теперь в бэкэнде происходит вся магия. Для работы вам понадобятся все обычные зависимости Экспресс и Мангуст. Кроме того, мы будем использовать Мультер, Облачныйи multi-storage-cloudinary. Multer предоставит доступ к файлам, отправленным через форму. Cloudinary используется для настройки и загрузки. multer-storage-cloudinary облегчит процесс их сочетания.

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

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

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

• установка папки для сохранения всех изображений в Cloudinary для этого проекта
• обеспечение загрузки только файлов «.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 });

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

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

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

• URL-адрес, который может использоваться для отображения изображения на интерфейсе
• public_id, который позволит вам получить доступ к изображению и удалить его из Cloudinary.

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-адрес в тегах изображения <img src=imageURL />.

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

Если у вас возникли вопросы, задайте их в комментариях.