2

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

当前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);
  }
});
4

2 回答 2

1

使用reywood:publish-composite等dburles:collection-helpers；

收藏 || 集合.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);
    }
  });
  }
});

路由器 || 路由器.js

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

服务器 || 出版物.js

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

    children: [
      {
        find: function(post) {
          return Images.find({ postId: post._id });
        }
      }
    ]
  }
});
于 2015-07-13T07:16:03.460 回答
0

使用 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}}
于 2015-07-13T06:04:19.237 回答