如何在流星上传到S3的照片，并有它同步到数据库项目

Question

我正在创建一个食谱web应用程序，并希望与每个新食谱上传一张图片。

我正在使用这个包:Amazon S3 File Uploader(https://github.com/Lepozepo/S3)。

在点击提交新开胃菜时，我可以成功地做两件事:

1. 在数据库中添加新的开胃菜名称和描述
2. 将上传的照片添加到s3数据库

我是MongoDB/Meteor的新手，我不确定如何连接这两个，以便在提交表单时将图像链接到配方名称和描述。

我是否需要在开胃菜集合中创建一个文档，说明s3图像应该放置的字段?如果这是正确的方向，我该怎么做?

目前部署的版本可以在:reedcookbook.meteor.com查看。

我的表单html:

<template name="appetizerForm">
    <!-- This is the appetizer modal -->
    <div class="modal fade" id="myAppModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Add An Appetizer</h4>
          </div>
          <div class="modal-body">
              <!-- This is the appetizer form -->
              <form>
                  <div class="form-group">
                      <label for="inputNewLabel">Name</label>
                      <input type="text" class="form-control" id="addNewAppetizer" name="appName" placeholder="What is the name of this appetizer?">
                  </div>
                  <div class="form-group">
                      <label for="inputNewLabel">Description</label>
                      <input type="text" class="form-control" id="addNewAppDesc" name="appDesc" placeholder="Share details about your appetizer.">
                  </div>
                  <div class="form-group">
                      <label for="inputNewLabel">Add Photo</label>
                      {{>s3}}
                      <p class="help-block">Upload a photo of your appetizer.</p>
                  </div>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary" value="submitApp">Submit Appetizer</button>
            </form>
        </div>
        </div>
      </div>
    </div>
</template>

My form js:

Template.appetizerForm.events({
    'submit form': function(event, template) {
        event.preventDefault();
        console.log("Form submitted");
        console.log(event.type);
        template.$("#myAppModal").modal("hide");
        var addNewAppetizerVar = event.target.appName.value;
        console.log(addNewAppetizerVar);
        var addNewAppDescVar = event.target.appDesc.value;
        console.log(addNewAppDescVar);
        Appetizers.insert({
            name: addNewAppetizerVar,
            description: addNewAppDescVar
        });
    var files = $("input.file_bag")[0].files
    S3.upload({
            files:files,
            path:"subfolder"
        },function(e,r){
            console.log(r);
    });
    }
});

Answer 1

您肯定需要将S3 url添加到您的集合模式中，这可以在使用Mongo.Collection.update在文件上传回调中接收url时完成。

[...]
var appetizerId = Appetizers.insert({
  name: addNewAppetizerVar,
  description: addNewAppDescVar
});
var files = $("input.file_bag")[0].files;
S3.upload({
  files: files,
  path: "subfolder"
}, function(error, s3Url){
  Appetizers.update(appetizerId, {
    $set: {
      imageUrl: s3Url
    }
  });
});
[...]

然后，您将能够使用<img>标记在模板中实际显示配方图像。

<template name="appetizer">
  <h3>{{name}}</h3>
  <p>{{description}}</p>
  <img src="{{imageUrl}}" alt="{{name}}">
</template>