如何将Cloudinary与Meteor集成

Question

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

这些是lepozepo：cloudinary软件包的说明（我可以接受其他替代方法）：

第1步

服务器

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>

profile.js

Template.profile.events({
  // Submit signup form event
  'submit form': function(e, t){
      // Prevent default actions
      e.preventDefault();

  var file = $('#userimage')[0].files[0];
  console.log(file)
  Cloudinary.upload(file, function(err, res) {
        console.log("Upload Error: " + err);
        console.log("Upload Result: " + res);
      });
  }
});

Answer 1

让我来帮助你。

我假设您的项目结构是这样的：

  /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'
});

如果您需要有关提交事件的帮助+上传图像，则可以阅读以下文章： 流星：Cloudinary