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

个人资料.html

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

配置文件.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