javascript - Cloudinary + Sails.js直接上传无效

我正在尝试使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 });

这是我没有得到的...这是上载程序？我应该如何使用它？然后我不知道该怎么办，我正在使用不同的文档来使其正常工作，但没有帮助...希望所有这样做的人都能对我有所帮助，谢谢！

最佳答案

在控制器上，将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%>

关于javascript - Cloudinary + Sails.js直接上传无效，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34579097/