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

Question

我使用CollectionFS来上传图片。图片上传需要属于特定let priority = DISPATCH_QUEUE_PRIORITY_DEFAULT dispatch_async(dispatch_get_global_queue(priority, 0)) { dispatch_async(dispatch_get_main_queue()) { self.pkvUser.reloadAllComponents() } } 。我按照文档中的步骤进行了操作 - Storing FS.File references in your objects - 但是，我很难显示相关帖子的图像。

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

post-list.html

post

发表-list.js

<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-form.js - 此表单创建一个新的帖子和图片。 Image._id保存到Post.postImage。

Template.postList.helpers({

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

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 });
  }
});

模板|| template.html

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

客户端|| client.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}}