Question

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

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

第1步

SERVER

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

客户端

$.cloudinary.config
    cloud_name:"cloud_name"

第2步

连接您的输入[type =＆＃34; file＆＃34;]。客户端。

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

如何将Cloudinary与Meteor集成

1 个答案: