如何将Cloudinary与Meteor集成

我希望用户上传他们个人资料的照片，并且在登录时在导航栏上显示他们的照片

以下是lepozepo:cloudinary软件包的说明（我对其他替代方案持开放态度）：

第一步

服务器

Cloudinary.config
    cloud_name: 'cloud_name'
    api_key: '1237419'
    api_secret: 'asdf24adsfjk'

客户

$.cloudinary.config
    cloud_name:"cloud_name"

步骤2

连接您的输入[type=“file”]。客户端

Template.yourtemplate.events
    "change input[type='file']": (e) ->
        files = e.currentTarget.files

        Cloudinary.upload files,
            folder:"secret" # optional parameters described in http://cloudinary.com/documentation/upload_images#remote_upload
            (err,res) -> #optional callback, you can catch with the Cloudinary collection as well
                console.log "Upload Error: #{err}"
                console.log "Upload Result: #{res}"

对于每一个步骤，我都不确定将代码放在哪里。例如，我不知道应该将Cloudinary.config放在哪里。服务器上的哪个位置

Title
client
  -helpers
    config.js
  -stylesheets
  -templates
    profile
      profile.html
      profile.js
  -main.html
  -main.js
lib
  -collections


server
  -config
    *cloudinary.js
  -fixtures.js
  -publications.js

cloudinary.js

Cloudinary.config({
  cloud_name: '***',
  api_key: '***',
  api_secret: '***'
});

profile.html

<template name="profile">
  <div>
    <form>
     <input type="file" id="userimage" name="userimage"/>
     <button type="submit">Upload</button>
    </form>
  </div>
</template>

我来帮你

我假设您的项目结构类似于：

  /main
    /client
      client.js
    /server
      server.js

好的，lepozepo:cloudinary是用coffescript编写的，但您可以将其和vanilla javascript一起使用，所以对于上面显示的文件夹结构，您可以使用以下代码：

client.js
$.cloudinary.config({
cloud_name: "yourname"
});

sometemplateveent({
  .... some event code
  Cloudinary.upload(files,{}, function(err, img) {
   ... do something when uploaded
  });

});     

然后呢

server.js

Cloudinary.config({
 cloud_name: 'yourname',
 api_key: 'somekey',
 api_secret: 'someapisecret'
});

---

如果您在提交活动+上传图片方面需要帮助，您可以阅读以下帖子：

Looks life CoffeeScriptOK，谢谢。有没有关于如何使用Meteor设置一切的想法？我不使用Meteor，但从概念上讲，不同类型的应用程序之间有一个类似的过程。在服务器上，您必须配置密钥，在前端，您可以对服务器（与cloudinary交互）进行API调用。最后一部分（问题中的第2步）只是在文件输入的

onchange

中添加了一个事件侦听器，告诉他们自动上传到cloudinary.place，放在服务器文件夹下的任何位置，例如

server/configs/cloudinary.coffee

，对于客户端文件夹也是如此。只需确保以“coffee”结尾，而不是client.js或server.js文件。我应该加上这些吗？我目前在我的客户机文件夹下有：helpers、stylesheet、templates、main.html、main.js在main.js中添加客户机代码。你需要带有server.js或main.js的服务器文件夹。名称不重要，只需要文件夹。因为我想让他们在个人资料页面上传照片，我应该在profile.js中添加客户端代码吗（这与profile.html一起包含在我的模板文件夹中）？我添加了你在client/config/cloudinary.js中编写的服务器代码。。。我希望这是好的。让我现在如果它工作，不要忘记检查我的问题链接。更新：我编辑了我的答案现在你可以检查问题了

server.js

Cloudinary.config({
 cloud_name: 'yourname',
 api_key: 'somekey',
 api_secret: 'someapisecret'
});