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 和其他配置参数可用。注意：切勿在公共客户端代码中公开您的 api_secret。

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

cloudinary.cloudinary_js_config()

这就完成了……

使用 XHR (Ajax XMLHttpRequest‎) CORS (Cross Origin Resource Sharing) 请求从浏览器直接上传。为了支持不支持 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) {}

您可以使用此脚本将数据绑定到表单中的一些隐藏字段，然后 渲染<%-uploader%>时会生成cloudinary-fileupload

Answer 2

除了 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 File Upload 代码，您应该参考$.cloudinary。 cloudinary 从未在您的布局中定义。

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

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

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

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

不管 CodeBean 的响应如何，你仍然需要配置$.cloudinary。