如何在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")
                            }
                        });
                    }
                });
            }
        });
    }

- timmy

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(Helpers)

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

- Ethaan

---

嘿，感谢你的帮助。但它仍然无法正常工作。虽然我没有收到任何错误信息。我已经更新了我的代码。我发现我同时安装了gridFS和cfs:filesystem，这会有影响吗？ - timmy

你确定图片被插入并保存在~/uploads/full路径下吗？如果运行productImages.fetch()，你会得到什么？ - Ethaan

是的，我检查了文件系统，图像存储在正确的路径中。我应该在哪里运行它？（对JS和Meteor相当新）我已经在控制台中运行了它，但是出现了错误。 - timmy

在控制台上运行productImages.find().fetch(); 如果你得到了类似“productImages”不存在的信息，那么你是否移除了不安全的包？如果是，你是否有发布/订阅功能？ - Ethaan

当我运行它时，我会得到一个带有FS.File的数组。 - timmy

请点击其中一个对象，检查您上传的最后一张图片的元数据字段。 - Ethaan