Cloudinary + Sails.js 直接上传不行

Question

我正在尝试使 cloudinary 直接上传正常工作，但文档中缺少某些内容...以下是我正在执行的步骤：

控制器：

/**
 * 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 插件需要您的 cloud_name 和其他配置参数可用。注意：切勿在 public 客户端代码中公开您的 api_secret。

要自动设置 Cloudinary 的配置，请在您的视图或布局中包含以下行：

cloudinary.cloudinary_js_config()

完成...

使用 XHR (Ajax XMLHttpRequest ) CORS（跨源资源共享）请求从浏览器直接上传。为了支持不支持 CORS 的旧浏览器，jQuery 插件将优雅地降级为基于 iframe 的解决方案。

此解决方案需要将 cloudinary_cors.html 放在 Node 应用程序的静态文件夹中。此文件位于 Cloudinary Javascript 库的 html 文件夹中。以下代码构建本地 cloudinary_cors.html 文件的 URL：

完成...

直接上传文件标签

使用 image_upload_tag 查看助手方法在您的 HTML 页面中嵌入文件输入标签。

以下示例将文件输入字段添加到您的表单。选择或拖动文件到此输入字段将自动开始从浏览器上传到 Cloudinary。

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

这是我不明白的...这是上传者？我应该如何使用它？然后我不知道还能做什么，我正在使用不同的文档来使其工作但没有任何帮助...我希望这样做的任何人都可以帮助我，谢谢！

Answer 1

在控制器上将 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%>时生成

Answer 2

除了 CodeBean 的回答之外，请注意，这里似乎混合使用 Cloudinary 的不同方式（在所讨论的原始代码中）。

控制器从这里可以看出，MyaccountController 控制器什么也没做：

您需要 "cloudinary" - 大概来自 npm install，它创建了一个 jQueryless Cloudinary class.
该变量是控制器的本地变量，因此对其余代码没有影响

查看：

只需要其中一行（最好是第二行）：

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

此方法 returns 带有 <script> 标记的字符串。然后应将该字符串嵌入 HTML 代码中。它是服务器端代码。这里，它什么都不做。

cloudinary.cloudinary_js_config();

如果您使用 jQuery 文件上传代码，您应该参考 $.cloudinary。 cloudinary 从未在您的布局中定义。

现在您正在创建一个 jQueryless 实例，您以后不会使用它。

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

最后，有一个 open-ended 注释，其中包含您应该在整个脚本开头使用的代码：

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

无论CodeBean的响应如何，您仍然需要配置$.cloudinary。

Cloudinary + Sails.js 直接上传不行

Cloudinary + Sails.js direct upload doesn't work

javascript

jquery

cloudinary

sails.js