如何将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'
});

如果您需要有关提交事件的帮助+上传图像,您可以阅读以下文章:Meteor:Cloudinary