如何从 Meteorjs 中的 gridFS 获取图像

Question

我在 MeteorJS 中使用 gridFS 包。

系统所做的是上传带有图片、标题、类别和价格的产品。这将保存在产品集合中。

使用模板助手，我可以从数据库中获取标题为 {{title}} 和价格为 {{price}} 的产品。但是我无法使用产品文档中的参考来获取图像。

谁能帮我解决这个问题？

    <template name="product">
        <div class="small-6 medium-3 columns end">
                <div class="product-container">
                    <div class="image-container">
                        {{#with image}}
                            <img src="{{this.url}}" class="product-image" alt="" />
                        {{/with}}
                    </div>
                    <div class="product-details">
                        <div class="product-title">
                            <a href="/productpage">{{title}}</a>
                        </div>
                        <div class="product-price">
                            {{price}}
                        </div>
                        <div class="product-buttons">
                            <span class="icon-heart"></span>
                            <span class="icon-repost"></span>
                            <span class="icon-plus"></span>
                        </div>
                    </div>
                </div>
            </div>
    </template>

    <template name="home">
    {{#each products}}
        {{> product}}
    {{/each}}
    </template>

    Products = new Mongo.Collection("products");

        var productImagesStore = new FS.Store.FileSystem('productImages', {
            path: '~/uploads/full'
        });

        productImages = new FS.Collection('productImages', {
            stores: [productImagesStore]
        });
        productImages.allow({
            insert: function () {
                return true;
            },
            update: function () {
                return true;
            },
            remove: function () {
                return true;
            },
            download: function () {
                return true;
            }
        });


    if (Meteor.isClient) {
          // This code only runs on the client
          Template.home.helpers({
            products: function () {
                return Products.find({});
            },
            image:function(){
                return productImages.findOne({'metadata.productId':this._id})
            }
          });

          Template.add.helpers({
            categories: function(){
                return categories.find({});
            }
          });


        Template.add.events({
            "submit form": function(event, template) {
                event.preventDefault();

                var file = $('#file').get(0).files[0],
                fsFile = new FS.File(file),
                productData = {
                    title:$('#title').val(),
                    price:$('#price').val(),
                    category:$('#category').val()
                }

                Products.insert(productData,function(err,result){
                    if(!err){
                        fsFile.metadata = {
                            productId:result, //we use metadata to refer the recent object id with the product images
                        }
                        productImages.insert(fsFile,function(err,result){
                            if(!err){
                                console.log("New images inserted")
                            }
                        });
                    }
                });
            }
        });
    }

Answer 1

您可以像这样将引用存储在 productImages 集合中。

 var file = $('#file').get(0).files[0],
     fsFile = new FS.File(file),
     productData = {
       title:$('#title').val(),
       price:$('#price').val(),
       category:$('#category').val()
                }
    Products.insert(productData,function(err,result){
               if(!err){
                 fsFile.metadata = {
                        productId:result, //we use metadata to refer the recent object id with the product images
                    }
                 productImages.insert(fsFile,function(err,result){
                  if(!err){
                     console.log("New images inserted")
                    }
                  });
                 }
               });

这是相同的插入，但更干净一点

现在您可以像这样使用帮助程序和 this 上下文。

HTML

{{#each products}}
   {{title}}
   {{price}}
    {{#with image}}
      IMG URL:{{this.url}}
      <img src="{{this.url}}" />
    {{/with}}
 {{/each}}

JS（助手）

Template.example.helpers({
  products:function(){
   return Products.find()
  },
   image:function(){
   return productImages.findOne({'metadata.productId':this._id})
   }
})