如何将 Cloudinary 与 Meteor 集成 [英] How to integrate Cloudinary with Meteor
问题描述
我希望用户为他们的个人资料上传照片，并且我希望在他们登录时在导航栏上显示他们的照片.
这些是 lepozepo:cloudinary 包的说明(我对其他替代品持开放态度):
第一步
服务器
Cloudinary.config云名:'云名'api_key: '1237419'api_secret: 'asdf24adsfjk'客户
$.cloudinary.config云名:云名"步骤 2
连接你的输入[type="file"].客户端.
Template.yourtemplate.events更改输入[type='file']":(e) ->文件 = e.currentTarget.filesCloudinary.upload 文件，folder:"secret" # http://cloudinary.com/documentation/upload_images#remote_upload 中描述的可选参数(错误，res)->#optional 回调，您也可以使用 Cloudinary 集合console.log "上传错误:#{err}"console.log "上传结果:#{res}"对于每个步骤，我不确定将代码放在哪里.例如，我不知道应该把 Cloudinary.config 放在哪里.在服务器上的什么位置?
标题客户-帮手配置文件-样式表-模板轮廓个人资料.html配置文件.js-main.html-main.js库-集合服务器-配置*cloudinary.js-fixtures.js-publications.jscloudinary.js
Cloudinary.config({cloud_name: '***',api_key: '***',api_secret: '***'});profile.html
<div><表格><input type="file" id="userimage" name="userimage"/><button type="submit">上传</button></表单>profile.js
Template.profile.events({//提交注册表单事件'提交表单':function(e, t){//防止默认操作e.preventDefault();var file = $('#userimage')[0].files[0];控制台日志(文件)Cloudinary.upload(file, function(err, res) {console.log("上传错误:" + err);console.log("上传结果:" + res);});}});让我来帮你.
我假设您的项目结构类似于:
/main/客户客户端.js/服务器服务器.js好的，lepozepo:cloudinary 是用 coffescript 编写的，但您可以将它与 vanilla javascript 一起使用，因此对于上面显示的文件夹结构，您可以使用以下代码:
client.js$.cloudinary.config({cloud_name: "你的名字"});一些模板veent({.... 一些事件代码Cloudinary.upload(files,{}, function(err, img) {...上传时做一些事情});});然后.
server.jsCloudinary.config({cloud_name: '你的名字',api_key: 'somekey',api_secret: 'someapisecret'});如果您需要关于提交事件的帮助 + 上传图片，您可以阅读这篇文章:Meteor: Cloudinary
I want users to upload photos for their profile and I want to display their photo on the navbar when they're logged in.
These are the instructions for the lepozepo:cloudinary package (I am open to other alternatives):
Step 1
SERVER
Cloudinary.config
cloud_name: 'cloud_name'
api_key: '1237419'
api_secret: 'asdf24adsfjk'
CLIENT
$.cloudinary.config
cloud_name:"cloud_name"
Step 2
Wire up your input[type="file"]. CLIENT SIDE.
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}"
For each of the steps, I'm not sure where to place the code. For example, I don't know where I should put Cloudinary.config. Where at on the server?
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);
});
}
});
let me help you.
I assume that you project structure is something like:
/main
/client
client.js
/server
server.js
Ok, lepozepo:cloudinary is written in coffescript but you can use it with vanilla javascript, so with the the folder structure showed above, you can use the following code:
client.js
$.cloudinary.config({
cloud_name: "yourname"
});
sometemplateveent({
.... some event code
Cloudinary.upload(files,{}, function(err, img) {
... do something when uploaded
});
});
and then.
server.js
Cloudinary.config({
cloud_name: 'yourname',
api_key: 'somekey',
api_secret: 'someapisecret'
});
If you need help with the submit event + upload the image you can read this post: Meteor: Cloudinary
这篇关于如何将 Cloudinary 与 Meteor 集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
