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

В сегодняшней статье мы собираемся написать простой скрипт nodejs для автоматической загрузки изображений на облачный cdn, когда кто-то добавляет новое изображение в папку на локальном компьютере или удаленном сервере. Запустите команду «npm init» в папке и выполните следующую команду для установки. модули npm:

npm install --save express chokidar cloudinary

Начнем с раскрутки простого экспресс-сервера:

const express = require('express');
let app = express();
let port = process.env.PORT || 5000;
//start server on specified port
app.listen(port);
console.log("serve listening on port", port);

Мы будем использовать модуль npm chokidar для прослушивания изменений в исходной папке изображений, чтобы проверить, добавляются ли новые файлы где-нибудь внутри папки. Вы можете найти отличное руководство, подробно объясняющее его использование со всеми доступными опциями, здесь: Tutorial.

Мы настроили chokidar для отслеживания изменений следующим образом:

const express = require('express');
let app = express();
const chokidar = require('chokidar');
const filepath = '/home/saurabh/Pictures/Apps/';
let watcher = chokidar.watch(filepath, {
  ignored: /[\/\\]\./, persistent: true
});
let log = console.log.bind(console);
let scanComplete = false;
watcher
  .on('add', function (path) {
    if (scanComplete) {
     //add image uploading code here   
   }
  })
  .on('addDir', function (path) {
    // log('Directory', path, 'has been added'); 
  })
  .on('error', function (error) { log('Error happened', error); })
  .on('ready', function () {
    log('Initial scan complete. Ready for changes.');
    scanComplete = true;
  })
  .on('raw', function (event, path, details) {
    // log('Raw event info:', event, path, details);
  })

Здесь мы сначала указываем путь к папке, в которую мы собираемся добавить файлы в строке 4. Затем мы настраиваем наблюдатель для просмотра файлов в папке на следующей строке. В Watcher есть несколько прослушивателей событий, для которых запускаются соответствующие обратные вызовы. Сначала он добавит все существующие файлы в папку в наблюдателе. Чтобы предотвратить загрузку существующих файлов на cdn, мы сначала устанавливаем флаг scanComplete на false. Когда chokidar завершит сканирование всех файлов, он запускает событие ready. В этом случае мы можем установить флаг scanComplete в значение true, чтобы мы могли загружать следующие входящие файлы на cdn. Каждый раз, когда новый файл добавляется где-нибудь внутри исходной папки, запускается событие add, и, поскольку начальное сканирование завершено, мы теперь можем добавлять новые файлы в cdn.

Теперь давайте сосредоточимся на настройке загрузки на облачный cdn. Для начала нам нужно настроить доступ к облачному cdn:

...
let scanComplete = false;
const cloudinary = require('cloudinary');
cloudinary.config({
  cloud_name: 'yourcloudname',
  api_key: 'your cloudinary api key',
  api_secret: 'api secret key'
});

Вы получите имя облака, api_key и api_secret с панели управления облачным CDN. Создайте учетную запись, если у вас ее нет, и перейдите на панель управления, чтобы получить все необходимые учетные данные. Нажмите на раскрытие, чтобы получить api_secret на вкладке панели инструментов.

Затем мы загрузим файлы на облачный cdn, когда chokidar watcher обнаружит добавление нового файла в путь к файлу.

...
.on('add', function (path) {
    if (scanComplete) {
      let pathArray = path.split('/');
      if (!pathArray[pathArray.length - 1].includes("crdownload")) {
        log('File', path, 'has been added');
        // console.log(pathArray.length, pathArray[pathArray.length - 2]);
        let destfolder = pathArray[pathArray.length - 2];
        let destfileName = pathArray[pathArray.length - 1];
        cloudinary.v2.uploader.upload(path, {
          folder: destfolder,
          use_filename:true,
          tags:[destfolder]
        }, function (error, result) {
          if (error) {
            console.log("error ocurred", error);
          }
          else {
            console.log("result of upload \n", result.secure_url,"\n insecure url: \n",result.url);
          }
        });
      }
    }
  })

Когда файл добавляется, мы сначала разделяем путь на отдельные имена, используя метод разделения в строке 4.

Например, если путь к файлу - '/home/saurabh/Pictures/Apps/imgcat1/img1.jpg', мы получаем pathArray как ['', 'home', 'saurabh', 'Pictures', 'Apps', 'imgcat1', ' img1.jpg ']

Теперь я загружаю изображения из Chrome, поэтому сначала создается временный файл «.crdownload», пока идет загрузка файла. Чтобы предотвратить загрузку временных файлов на cdn, мы добавили условие if в следующую строку. После завершения загрузки файла я предпочитаю загружать файл в определенную удаленную папку на облачном компакт-диске, а не загружать файлы напрямую по базовому пути. Сначала мы получаем имя целевой папки, которое может быть imgcat1 (второй последний элемент в переменной pathArray) в приведенном выше примере и destfileName, который является последним элементом в переменной pathArray.

Затем мы вызываем метод загрузчика из облачного модуля для загрузки файла из переменной path, которую возвращает chokidar watcher. Второй параметр в функции загрузки - это json, содержащий дополнительные параметры, которые настраивают загрузку на cdn. Вы можете получить подробный список вариантов загрузки здесь: Загрузить Api Reference

Сначала мы указываем, что загрузим изображение в папку назначения на облачном cdn. Пожалуйста, создайте соответствующую папку на компакт-диске, перейдя на облачную панель управления, щелкнув медиа-библиотеку и создав новую папку, чтобы избежать любых нежелательных проблем. Затем мы устанавливаем флаг «use_filename» в значение true, чтобы имена файлов не назначались случайным образом на cdn, и указываем соответствующие теги, чтобы упростить индексацию и использование изображений в будущем.

Вы можете найти полный исходный код скрипта здесь: GithubGist

Бонусный совет:

Совет №1.. Даже если вы не используете облачный сервер в качестве компакт-диска, вы все равно можете использовать модуль chokidar для различных целей, например для обновления метаданных файла / содержимого при загрузке новых файлов. на сервер или запустите несколько простых задач автоматизации в зависимости от ваших потребностей.

Совет № 2:. Вы также можете загружать видеофайлы на облачный CDN и, если видеофайлы, используя ту же функцию загрузки, следуя следующей документации: Ссылка на API загрузки видео

Подключитесь глубже:

В следующей статье я, вероятно, попытаюсь рассказать о создании прогрессивного веб-приложения с использованием reactjs и серверной части node / firebase. Если вы хотите получать уведомления о предстоящих статьях, подпишитесь на нашу страницу в facebook: Technoetics