Прямая загрузка Cloudinary + Sails.js не работает

я пытаюсь заставить работать облачную прямую загрузку, но что-то в документации отсутствует... вот шаги, которые я делаю:

Контроллер:

/**
 * MyaccountController
 *
 * @description :: Server-side logic for managing myaccounts
 * @help        :: See http://sailsjs.org/#!/documentation/concepts/Controllers
 */
var cloudinary = require('cloudinary');

cloudinary.config({ 
    cloud_name: 'MyCloudName', 
    api_key: 'MyAPIKey', 
    api_secret: 'MyAPISecret' 
});

Теперь это мой макет:

<!--SCRIPTS-->
    <script type="text/javascript" src="/js/dependencies/sails.io.js"></script>
    <script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="/js/jquery.iframe-transport.js"></script>
    <script type="text/javascript" src="/js/jquery.fileupload.js"></script>
    <script type="text/javascript" src="/js/jquery.cloudinary.js"></script>
    <script src="../node_modules/cloudinary-jquery-file-upload/cloudinary-jquery-file-upload.js"></script>
    <script type="text/javascript">
      cloudinary.cloudinary_js_config();
      var cloudinary_cors = "http://" + window.location.host + "/cloudinary_cors.html";
      console.log(cloudinary_cors);

      cloudinary.uploader.image_upload_tag('photo', { callback: cloudinary_cors });

      $(".photo").cloudinary_fileupload();

      // Using the config function 
      var cl = cloudinary.Cloudinary.new();
      cl.config( "MyCloudName", "MyAPIKey");
      /*
      $.cloudinary.config({ cloud_name: 'MyCloudName', api_key: 'MyAPIKey'});
    </script>

Моя форма:

<form action="" method="post" enctype="multipart/form-data" class="upload_form">
    <div class="form-group">
        <label>Foto de perfil</label>
        <input type="file" name="photo" id="photo" class="photo">
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-default">Cargar</button>
    </div>
</form>

Я не понимаю, почему он не работает, в документах говорится, что плагин Cloudinary jQuery требует, чтобы ваше имя облака и дополнительные параметры конфигурации были доступны. Примечание: никогда не раскрывайте свой api_secret в общедоступном коде на стороне клиента.

Чтобы автоматически настроить конфигурацию Cloudinary, включите следующую строку в представление или макет:

cloudinary.cloudinary_js_config()

Готово...

Прямая загрузка из браузера выполняется с использованием запросов XHR (Ajax XMLHttpRequest‎) CORS (Cross Origin Resource Sharing). Для поддержки старых браузеров, не поддерживающих CORS, подключаемый модуль jQuery изящно деградирует до решения на основе iframe.

Это решение требует размещения cloudinary_cors.html в статической папке вашего приложения Node. Этот файл доступен в папке html библиотеки Javascript Cloudinary. Следующий код создает URL локального файла cloudinary_cors.html:

Готово...

Тег файла прямой загрузки

Вставьте тег ввода файла в свои HTML-страницы, используя вспомогательный метод представления image_upload_tag.

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

cloudinary.uploader.image_upload_tag('image_id', { callback: cloudinary_cors });

это то, чего я не понимаю... это загрузчик? как мне его использовать? а потом я не знаю, что еще делать, я использую разные документы, чтобы заставить его работать, но ничего не помогает ... Я надеюсь, что любой, кто это сделал, может мне помочь, спасибо!


javascript jquery sails.js cloudinary
person matuuz    schedule 03.01.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

На контроллере инициализируйте cloudinary как

var uploader = cloudinary.uploader.image_upload_tag('image_id', { callback: cloudinary_cors, html: { multiple: 1 } });

и передайте его для просмотра и визуализации там,

  <%-uploader%>

затем используйте jquery для получения данных:

$('.cloudinary-fileupload').bind('cloudinarydone', function(e, data) {}

вы можете использовать этот скрипт для привязки данных к некоторым скрытым полям внутри вашей формы, и cloudinary-fileupload будет сгенерировано при отображении <%-uploader%>

person Basilin Joe    schedule 04.01.2016

arrow_upward
2
arrow_downward

В дополнение к ответу CodeBean обратите внимание, что, похоже, существуют разные способы использования Cloudinary, которые здесь смешиваются (в исходном коде, как было сказано).

Контроллер Насколько видно отсюда, контроллер MyaccountController ничего не делает:

  1. Вам требуется «cloudinary» — предположительно, из npm install, который создает экземпляр класса jQueryless Cloudinary.
  2. Переменная является локальной для контроллера, поэтому не влияет на остальную часть кода.

Просмотр:

Требуется только одна из этих строк (желательно вторая):

<script type="text/javascript" src="/js/jquery.cloudinary.js"></script>
<script src="../node_modules/cloudinary-jquery-file-upload/cloudinary-jquery-file-upload.js"></script>

Этот метод возвращает строку с тегом <script>. Затем строка должна быть встроена в HTML-код. Это серверный код. Здесь он ничего не делает.

cloudinary.cloudinary_js_config();

Если вы используете код загрузки файлов jQuery, вам следует обратиться к $.cloudinary. cloudinary никогда не определялся в вашем макете.

Теперь вы создаете экземпляр jQueryless, который впоследствии не используете.

var cl = cloudinary.Cloudinary.new();
cl.config( "MyCloudName", "MyAPIKey");

Наконец, есть открытый комментарий с кодом, который вы должны были использовать в начале всего скрипта:

/*
$.cloudinary.config({ cloud_name: 'MyCloudName', api_key: 'MyAPIKey'});

Независимо от ответа CodeBean вам все равно нужно настроить $.cloudinary.

person Itay Taragano    schedule 05.01.2016