在 Ember JS 应用程序中初始化 cloudinary_js v2答案

【问题标题】：Initialize cloudinary_js v2 in Ember JS app在 Ember JS 应用程序中初始化 cloudinary_js v2
【发布时间】：2016-08-01 02:55:32
【问题描述】：

我正在尝试将图像从 EmberJS 应用程序 (v2.6) 上传到 cloudinary，遵循使用 post of Beerlington 的 cloudinary_js（现在使用新的 API v2）并安装它：

npm install blueimp-file-upload --save
npm install cloudinary-jquery-file-upload --save

但是当我尝试初始化 cloudinary 时，无法识别该库。

#app/initializers/cloudinary.js
export default {
  name: 'cloudinary',
  initialize: function(/* container, app */) {
    jQuery.cloudinary.config({
      cloud_name: ENV.CLOUDINARY_NAME
    });
  }
};

#console
TypeError: Cannot read property 'config' of undefined

【问题讨论】：

ember-cli-build.js - app.import(.js>.... 包含所有必需的文件。
当我使用 npm 安装库时，它们位于 npm_modules/ 中，当我尝试将其导入 ember-cli-build.js 时，它会抱怨。它适用于 vendor/ 和 bower_components/
我也尝试使用 ember-browserify 但它也不适用于 cloudinary-jquery-file-upload :(
这将对您有所帮助 - stackoverflow.com/questions/26544578/… - 您是否有任何具体理由只使用 npm 包。
因为在我使用 npm 安装的 'cloudinary-jquery-file-upload.js' 文件中，我找到了方法 'unsigned_cloudinary_upload' 但在 Bower 获取的 js 文件中我找不到方法。我已经尝试使用 ember-browserify 失败了。

标签： ember.js npm ember-cli cloudinary

【解决方案1】：

由于 ember.js 本质上是一个客户端框架，因此您需要使用 bower 库而不是 npm (more)。

使用 bower 安装 Cloudinary：

bower install cloudinary-jquery-file-upload --save

（blueimp 将作为依赖项安装。）

将导入添加到您的 ember-cli-build.js 文件中：

/*jshint node:true*/
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    // Add options here
  });

    app.import("bower_components/jquery/dist/jquery.js");
    app.import("bower_components/blueimp-file-upload/js/vendor/jquery.ui.widget.js");
    app.import("bower_components/blueimp-file-upload/js/jquery.iframe-transport.js");
    app.import("bower_components/blueimp-file-upload/js/jquery.fileupload.js");
    app.import('bower_components/cloudinary-jquery-file-upload/cloudinary-jquery-file-upload.js');

  return app.toTree();
};

将jQuery 添加到.jshintrc 中的全局定义中（此处显示片段）：

{
  "predef": [
    "document",
    "window",
    "-Promise",
    "jQuery",
    "$"
  ],
  "browser": true,
  // rest of file...
}

如果您打算直接使用 cloudinary 命名空间，也请添加 cloudinary。

现在您可以在代码中使用 Cloudinary 和 Blueimp。例如：

import Ember from 'ember';

export default Ember.Route.extend(
  {
    model() {
      $.cloudinary.config({"cloud_name": "your_cloud"});
      $(document).ready(function () {
        $(".cloudinary-fileupload").cloudinary_fileupload(

        // etc.

        )}
      );
    }
  });

【讨论】：