ember.js – 将cloudinary_js与ember集成

2023年11月11日 197次阅读

我正在使用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集成的详细步骤.

谢谢.

最佳答案 您将需要一个初始化程序来设置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写了一篇详细的博文.有一个使用ember-cli的example app,它展示了如何配置Cloudinary以及启动和运行所需的一切.让整个工作正常工作有一些棘手的部分,所以我建议如果你在配置设置权限之后被绊倒,请检查一下.

点赞