Question

我现在正在研究一个Meteor项目并尝试执行以下操作。

我有一个产品列表页面，当我点击一个产品时，我会进入产品编辑页面。

我想知道的是如何附上产品图片并在返回产品列表页面时显示它。

我知道CollectionFS用于文件上传，但由于没有可靠的指南来显示细节，我遇到了麻烦。

我将此添加到架构中，但不知道如何在列表页面中显示产品图像。

Images = new FS.Collection("images", {
  stores: [new FS.Store.FileSystem("images")]
});

Images.allow({
 insert: function(){
 return true;
 },
 update: function(){
 return true;
 },
 remove: function(){
 return true;
 },
 download: function(){
 return true;
 }
});
Schemas.Products = new SimpleSchema({
  'name': {
    type: String,
    label: 'What is the name of the building?',
    max: 200,
    unique: true
  },
  'picture': {
    type: String, 
    max: 200,
    optional: true,
    autoform: {
      afFieldInput: {
        type: 'fileUpload',
        collection: 'Images',
        accept: 'image/*',
        label: 'Choose file'
      }
    }
  }
});

有人可以给我一个方向吗？请帮帮我！

此处的目标是在产品列表页面中显示产品图像。

Answer 1

我在CollectionFS的页面上发现这真的很有用wiki。它显示了如何从前端显示已上传的图像。

CollectionFS提供与其url对象关联的FS.File方法。使用此方法，我们可以显示前端的图像。

步骤：

从服务器端发布Images（FS.Collection个实例）。
从您的客户端订阅上述内容。
在模板助手中，return Images.find()到模板。

您也可以将Images.find()的结果嵌入到另一个集合的结果中。例如：

var products = Products.find().fetch();
products.forEach(function(each) {
    each.file = Images.findOne({ _id: each.file });
});
return products;

在模板内，您可以使用以下方式显示图像：

<img src="{{this.url stores='images'}}" />

此处this引用FS.File实例，'images'是商店名称。

希望获得如何处理图像上传和指南的指南节目

1 个答案: