在 Meteor.js 中显示来自对象的 FS.File 引用

Question

我正在使用 CollectionFS 来允许上传图片。图片上传需要属于特定的posts。我按照文档中的步骤 - Storing FS.File references in your objects - 但是，我很难显示相关帖子的图像。

post 当前使用引用 image._id 的 postImage 保存 - 这部分工作正常。但是，我不确定如何显示实际照片，因为它需要从 images 集合中获取照片（post 集合只是保存了一个 ID 以供参考）。

post-list.html

<template name="postList">
<tr data-id="{{ _id }}" class="{{ postType }}">
    ...
    <td><textarea name="postContent" value="{{ postContent }}"></textarea> </td> 
    <td>{{ postImage._id }} </td> // This currently displays the correct image._id, but I would like to display the image,
    <td><button class="delete tiny alert">Delete</button></td>
</tr>
</template>

post-list.js

Template.postList.helpers({

  posts: function() {
    var currentCalendar = this._id;
    return Posts.find({calendarId: currentCalendar}, {sort: [["postDate","asc"]] });  
  }
});

post-form.js - 此表单创建一个新的帖子和图像。 Image._id 保存到 Post.postImage。

Template.postForm.events({

  // handle the form submission
  'submit form': function(event) {

    // stop the form from submitting
    event.preventDefault();

    // get the data we need from the form
    var file = $('.myFileInput').get(0).files[0];
    var fileObj = Images.insert(file);
    var currentCalendar = this._id;
    var newPost = {
      ...
      calendarId: currentCalendar,
      owner: Meteor.userId(),
      postImage: fileObj,
    };    

    // create the new poll
    Posts.insert(newPost);
  }
});

Answer 1

使用reywood:publish-composite 和dburles:collection-helpers 这样；

收藏 || collections.js

Posts = new Mongo.Collection('posts');
Images = new FS.Collection("files", {
  stores: [
     // Store gridfs or fs
  ]
});

Posts.helpers({
  images: function() {
    return Images.find({ postId: this._id });
  }
});

模板 ||模板.html

<template name="postList">
  {{# each posts }}
    {{ title }}
    {{# each images }} 
      <img src="{{ url }}">
    {{/each}}
  {{/each}}
</template>

客户 ||客户端.js

Template.postList.helpers({
  posts: function() {
    return Posts.find();
  }
});

Template.postList.events({
  // handle the form submission
  'submit form': function(event, template) {

  // stop the form from submitting
  event.preventDefault();

  // get the data we need from the form
  var file = template.find('.myFileInput').files[0];

  Posts.insert({
    calendarId: this._id,
    owner: Meteor.userId()
  }, function(err, _id) {
    var image = new FS.File(file);

    file.postId = _id;

    if (!err) {
      Images.insert(image);
    }
  });
  }
});

路由器 || router.js

Router.route('/', {
  name: 'Index',
  waitOn: function() {
    return Meteor.subscribe('posts');
  }
});

服务器 || Publications.js

Meteor.publishComposite('posts', function() {
  return {
    find: function() {
      return Posts.find({ });
    },

    children: [
      {
        find: function(post) {
          return Images.find({ postId: post._id });
        }
      }
    ]
  }
});

Answer 2

使用 CollectionFS 时，您需要在客户端确保正确定义订阅。这是我的开发人员在使用 CFS 时遇到的最大障碍 - 正确理解和映射订阅。

首先要做的事 - 你需要有一个订阅会点击图片收藏。我不熟悉其内部映射的最新 CFS 更新，但以下方法通常对我有用。

Meteor.publish('post', function(_id) {
  var post = Posts.findOne({_id: _id});
  if(!post) return this.ready();
  return [
    Posts.find({_id: _id}),
    Images.find({_id: post.postImage})
  ]
});

为了显示，有一个方便的 CFSUI 包 (https://github.com/CollectionFS/Meteor-cfs-ui)，它提供了一些不错的前端处理程序。

通过上述映射您的订阅，您可以执行类似的操作

{{#with FS.GetFile "images" post.postImage}}
  <img src="{{this.url store='thumbnails'}}" alt="">
{{/with}}