collections2 和 meteor-cfs-autoform 上传和显示图像

Question

我正在使用 collections2 和 meteor-cfs-autoform 作为模式，并使用 cfs:gridfs 存储适配器包上传和显示图像，但无法在 template.Can 中显示图像，请告诉我我在哪里做错事及其解决方法。

collections.js

Recipes = new Mongo.Collection('recipes');
Reviews = new Mongo.Collection('reviews');
RecipesImages = new FS.Collection("recipesImages", {
    stores: [new FS.Store.GridFS("recipesImages")]
});
RecipesImages.allow({
    insert: function(userId, doc) {
        return true;
    },
    update: function(userId, doc, fieldNames, modifier) {
        return true;
    },
    download: function(userId) {
        return true;
    },
    fetch: null
});

Recipes.attachSchema(new SimpleSchema({
    name: {
        type: String,
        label: "Recipe Name",
        max: 100
    },

        ingredients: {
            type: [Object],
            minCount: 1
        },

    "ingredients.$.name": {
    type: String
        },
    "ingredients.$.amount": {
    type: String
    },
    description: {
        type: String,
        label: "How to prepare ",
    },
    time: {
        type: Number,
        label: "Time (Minutes)",
    },
    image: {
        type: String,
        autoform: {
            afFieldInput: {
                type: "cfs-file",
                collection: 'recipesImages',
                label: 'Recipe Picture'
            }
        }
    }
}));

recipes.js

   Template.recipes.helpers({
        'showRecipes':function(){
            return Recipes.find();
        },
        'images': function () {
            return RecipesImages.findOne({_id:id}) ;
        }
    })

recipes.html

<template name="recipes">
    {{#each showRecipes}}

                <div class=" col-md-4">
                    <div class="panel panel-default mb " >
                        <div class="panel-image">
                            <img src="{{this.url }}" class="panel-image-preview" />
                        </div>
                        <div class="panel-body">
                            <h4>{{name}}</h4>
                            <p>{{description}}</p>
                        </div>
                        <div class="panel-footer text-center" >
                            <p>its footer </p>
                        </div>
                    </div>
                </div>
    {{/each}}
</template>

Answer 1

您要导入 cfs:ui 吗？如果没有，您应该包含它以便您可以使用 FS.GetFile 助手。然后你就可以使用这个代码了。

食谱模板

<template name="recipes">
    {{#each showRecipes}}

        <div class=" col-md-4">
            <div class="panel panel-default mb " >
                <div class="panel-image">

                    {{#with FS.GetFile "recipesImages" image}}
                        <img src="{{url}}" class="panel-image-preview" />
                    {{/with}}

                </div>
                <div class="panel-body">
                    <h4>{{name}}</h4>
                    <p>{{description}}</p>
                        </div>
                        <div class="panel-footer text-center" >
                            <a href="{{pathFor 'show_recipe'}}"><span class="glyphicon glyphicon-open-file"></span></a>
                            <a href="#" ><span class="glyphicon glyphicon-time" style="vertical-align:middle"></span><small> {{time}}</small></a>
                            <a href="#"><span class="glyphicon glyphicon-heart likes" style="vertical-align:middle"></span><small>2 </small></a>
                            <a href="#"><span class="glyphicon glyphicon-share"></span></a>
                        </div>
                    </div>
                </div>
    {{/each}}
</template>

食谱助手

Template.recipes.helpers({
    'showRecipes':function(){
        return Recipes.find();
    }
});

这是 link 到 cfs:ui documentation

collections2 和 meteor-cfs-autoform 上传和显示图像

collections2 and meteor-cfs-autoform to upload and display image

mongodb

meteor

meteor-autoform

meteor-helper