如何将 Meteor 中的照片上传到 S3 并将其同步到数据库项目？

Question

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

我正在使用这个包：Amazon S3 文件上传器(https://github.com/Lepozepo/S3)。

点击提交新开胃菜后，我可以成功地做两件事：

向数据库添加新的开胃菜名称和描述
将上传的照片添加到s3数据库

我是 MongoDB/Meteor 的新手，我不确定如何将这两者联系起来，以便在提交表格时将图像链接到食谱名称和描述。

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

目前部署的版本可见于：reed-cookbook.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>

我的表单 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.[=14= 在文件上传回调中收到 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>

如何将 Meteor 中的照片上传到 S3 并将其同步到数据库项目？

How to upload a photo in Meteor to S3 and have it sync to database item?

file-upload

amazon-s3

mongodb

meteor