Директното качване на 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>

Не разбирам защо не работи, в документите се казва, че плъгинът jQuery на Cloudinary изисква вашето име на cloud_name и допълнителни конфигурационни параметри да бъдат налични. Забележка: никога не излагайте своя 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