Создание компонента аватара пользователя с Node.js и TransloadIt

Вот маршрут avatar для сбора этих данных:

 // Ajax callback for setting the avatar app.post('/avatar', ensureAuthenticated, function(req, res){ req.user.avatar = req.body req.user.save(function(err) { if(err) { return res.send('error'); } return res.send('ok'); }); }); 

В производстве вы, вероятно, захотите санировать и проверять это.

Как вы можете видеть, мы берем хеш производных изображений и их URL, берем текущего аутентифицированного пользователя из req.user , устанавливаем свойство avatar для предоставленного хэша и затем обновляем модель пользователя.

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

На этом мы завершаем наше основное приложение. Не забывайте, что весь источник — включая механизм аутентификации — на Github закончен .

Расширенное использование

Прежде чем закончить, давайте кратко рассмотрим несколько более сложных аспектов TransloadIt.

Другие варианты на стороне клиента

Вам не нужно использовать предоставленный плагин jQuery. В разделе « Проекты сообщества » документации вы найдете несколько альтернатив, в том числе плагин для Bootstrap , плагин для drag n ‘drop , плагин Angular или поддержку простого старого XHR , а также другие.

XHR, возможно, стоит того, чтобы посмотреть на него более подробно. Это простое решение, которое предлагает большую гибкость, при этом вы должны предоставить свой собственный отзыв — например, какой-то индикатор загрузки. Стоит также отметить, что после загрузки файла он пытается определить, когда сборка была завершена, опрашивая сервер с интервалом в 1000 мс.

Уведомления

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

Уведомления легко реализуются с точки зрения потребителя; просто notify_url инструкции по сборке, например:

 { auth : { ... }, steps : { ... }, notify_url : "http://example.com/webhooks/incoming/transloadit" } 

Когда ваш URL будет проверен Transloadit, предоставленный JSON будет содержать поле signature которое вы можете использовать для проверки того, что уведомление действительно пришло от них. Просто расшифруйте подпись, используя свой секрет авторизации.

Во время разработки вы можете воспользоваться этим прокси-пакетом для тестирования уведомлений о сборке или использовать службу туннелирования, такую ​​как ngrok .

Резюме

В этой серии из двух частей мы подробно рассмотрели TransloadIt , сервис обработки файлов.

В первой части мы рассмотрели некоторые преимущества и недостатки, а затем рассмотрели ключевые концепции.

В этой части мы запачкали руки и создали простой компонент аватара пользователя, используя jQuery, Node.js и Express.

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

Используете ли вы TransloadIt в своих проектах? Знаете ли вы о лучшем сервисе? Дай мне знать в комментариях.