将cloudinary_js与ember集成

时间:2014-07-09 06:51:13

标签: ember.js ember-data npm ember-cli cloudinary

我正在使用Ember-cli

开发我的第一个ember应用程序

在这里,我想使用cloudinary_js

添加图片上传功能

参考此link

图片模型:

import DS from 'ember-data';
var attr = DS.attr;

export default DS.Model.extend({
  imageUrl:         attr('string'),
  thumbImageUrl:    attr('string'),
  standardImageUrl: attr('string'),
  favourite:        attr('string'),
  order:            attr('number')
});

我已经使用bower添加了所需的js文件,并将它们列在Brocfile.js

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

添加了文件字段作为组件:

import Ember from "ember";

export default Ember.View.extend({
  tagName: "input",
  type: "file",
  accept: "image/*",
  class: "cloudinary-fileupload",
  dataCloudinaryField: "image_id",
  attributeBindings: [ "name", "type", "value", "class"],
  change: function() {
  }
});

这里有困,在哪里指定cloudinary的配置(云名和api密钥)?

任何人都可以帮助我使用ember-cli与ember进行cloudinary集成的详细步骤。

感谢。

1 个答案:

答案 0 :(得分:2)

您需要一个初始化程序,用于设置 cloud_name api_key 属性。我会将此代码放在 app / initializers / cloudinary.js

export default {
  name: 'cloudinary',

  initialize: function() {
    $.cloudinary.config({
      cloud_name: 'MYCLOUD',
      api_key:    'MYKEY'
    });
  }
};

几天前我在how to integrate cloudinary_js and Ember写了一篇详细的博文。有一个example app使用了ember-cli,并展示了如何配置Cloudinary以及启动和运行所需的一切。让整个工作正常工作有一些棘手的部分,所以如果你在配置设置正确后被绊倒,我建议你检查一下。