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

テンプレート || テンプレート 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');
  }
});

サーバー || 出版物.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 に答える