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（跨源资源共享）请求从浏览器直接上载。为了支持不支持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类的实例。
变量是控制器的本地变量，因此对代码的其余部分没有影响

查看：

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

<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。

Cloudinary + Sails.js直接上传不起作用

2 个答案: