Image 希望获得如何处理图像上传的指南&；显示

我现在正在做一个流星项目，并试图做到以下几点

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

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

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

我知道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'
      }
    }
  }
});

有人能给我指路吗？请帮帮我

---

这里的目标是在产品列表页面中显示产品图像

我发现这在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'
      }
    }
  }
});

CollectionFS提供了一个与其

FS.File

对象关联的

url

方法。使用这种方法，我们可以从前端显示图像

步骤：

从服务器端发布

图像

（

FS.Collection

实例）

从客户端订阅以上内容

在模板帮助程序中，

将Images.find（）返回模板

您还可以将

Images.find（）的结果嵌入到另一个集合的结果中。例如：

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

这里的
此
指的是
FS.File
实例，而
'images'
是商店名称。
您可以查看
yogiben:autoform文件
，该文件扩展了
aldeed:autoform
，使上传/下载过程非常简单。但是，它有一些问题。嗨，Blaze，谢谢你的联系。我已经检查过yogiben:autoform文件包，但似乎没有任何与我的案例类似的详细示例。当我在编辑页面中使用yogiben:autoform文件时，我得到的是这个。{{>afQuickField name=“name”}{{>afQuickField name=“picture”}保存后，我得到了这个信息。名称：“产品#1”图片：“r2qancfvswzdrv7n”现在我需要通过此图片字符串在列表页中显示产品图像？？？您是否从服务器发布了
图像
？检查您的浏览器控制台中是否有任何错误。我从服务器发布了图像，但我应该在哪里订阅它？