cfs 在客户端显示上传的文件 [英] cfs display uploaded files in client side

问题描述

我的代码:server/app.js

var imageLargeStore = new FS.Store.S3("imagesLarge", {accessKeyId: "xxxx",秘密访问密钥:xxx"，存储桶:个人资料拇指"，变换写入:函数(fileObj，readStream，writeStream){gm(readStream, fileObj.name()).resize('250', '250').stream().pipe(writeStream)}});var imageSmallStore = new FS.Store.S3("imagesSmall", {accessKeyId: "xxxx",秘密访问密钥:xxx"，存储桶:个人资料拇指"，变换写入:函数(fileObj，readStream，writeStream){gm(readStream, fileObj.name()).resize('80', '80').stream().pipe(writeStream)}});拇指 = 新 FS.Collection("图片", {商店:[imageLargeStore,imageSmallStore]});Meteor.publish("图片", function() {返回大拇指.find();});拇指.允许({插入:函数(用户 ID，文档){返回真；},更新:函数(用户 ID、文档、字段、修饰符){返回真；},删除:功能(用户ID，文档){返回真；},下载:功能(){返回真；}});

client/app.js

var imageLargeStore = new FS.Store.S3("imagesLarge");var imageSmallStore = new FS.Store.S3("imagesSmall");拇指 = 新 FS.Collection("图片", {商店:[imageLargeStore,imageSmallStore],筛选: {允许: {内容类型:['图像/*']}}})

上传工作正常，我可以在 aws 中看到图像

thumbs.insert(res,function(err,fileobj){控制台日志(文件对象)；})

我在客户端发布并订阅了所有合集

我试图显示图像，但它们没有显示

{{#每张图片}}<div><a href="{{this.url}}" target="_blank"><img src="{{this.url store='imageSmallStore' uploading='/amazon.png' storage='/angjs.jpg'}}" alt="" class="thumbnail"/></a>

{{/每个}}图像:功能(){返回大拇指.find({});}

但是图像没有显示，而不是存储图像(angjs.jpg)正在显示.

当我检查元素时，我可以看到类似的网址

但是图片没有显示，我的代码有什么问题?

当我尝试在 aws 控制台中打开图像时出现此错误

解决方案

我认为您正在为集合定义允许规则，但仅在服务器上.客户端还需要访问集合的 download 属性才能访问文件的数据(不是实际图像)

官方文档对此进行了解释 https://github.com/CollectionFS/Meteor-CollectionFS#安全

My code: server/app.js

var imageLargeStore = new FS.Store.S3("imagesLarge", {
  accessKeyId: "xxxx", 
  secretAccessKey: "xxx", 
  bucket: "profile-thumbs", 
  transformWrite: function(fileObj, readStream, writeStream) {
    gm(readStream, fileObj.name()).resize('250', '250').stream().pipe(writeStream)
  }
});
var imageSmallStore = new FS.Store.S3("imagesSmall", {
  accessKeyId: "xxxx", 
  secretAccessKey: "xxx",
  bucket: "profile-thumbs",
  transformWrite: function(fileObj, readStream, writeStream) {
    gm(readStream, fileObj.name()).resize('80', '80').stream().pipe(writeStream)
  }
});


thumbs = new FS.Collection("images", {
  stores: [imageLargeStore,imageSmallStore]
});
Meteor.publish("images", function() {
  return thumbs.find();
});
thumbs.allow({
  insert: function (userId, doc) {
    return true;
  },
  update: function (userId, doc, fields, modifier) {
    return true;
  },
  remove: function (userId, doc) {
    return true;
  },
  download:function(){
    return true;
  }
});

client/app.js

var imageLargeStore = new FS.Store.S3("imagesLarge");
var imageSmallStore = new FS.Store.S3("imagesSmall");
thumbs = new FS.Collection("images", {
  stores: [imageLargeStore,imageSmallStore],
  filter: {
    allow: {
      contentTypes: ['image/*']
    }
  }
})

uploading is working fine and I can see the image in aws

thumbs.insert(res,function(err,fileobj){
      console.log(fileobj);
    })

I published and subscribed to all the collection in client

I tried to display images but they are not showing

{{#each images}}
    <div>
       <a href="{{this.url}}" target="_blank"><img src="{{this.url store='imageSmallStore' uploading='/amazon.png' storing='/angjs.jpg'}}" alt="" class="thumbnail" /></a>
                </div>

 {{/each}}

images:function(){
  return thumbs.find({});
}

But Images are not showing, instead of storing image(angjs.jpg) is showing.

when I inspect the element I can see the url like

but Image is not showing,what is the issue with my code?

I'm getting this error when I try to open Image in aws console

解决方案

I think what happens is you are defining allow rules for the collection but only on the server. The client also needs access to the download property of the collection to be able to access the file's data (not the actual image)

The official documentation kind's of explain this https://github.com/CollectionFS/Meteor-CollectionFS#security

这篇关于cfs 在客户端显示上传的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！