多FS采集流星

Question

我目前正在使用 Meteor collectionFS，以便能够上传图像，该项目工作正常，但只有当我想上传并查看单张图像时它才有效。我想要的是 select 2 个或更多图像并正确可视化，在输入中我使用的是 multiple 属性，但是如何查看图像？

客户端 images.html

<template name="images">
    <div align="center">
      <form align="center" role="form">
        <div>
          <div>
            <span class="btn btn-success btn-file">
              <input type="file" accept=".gif,.jpg,.png" class="myFileInputimagepub" id="image" multiple/>
            </span>
          </div>
          <div>
              <img src="{{currentUser.photo.image}}" alt="Image" width="60px" height="60px"  value=''/>
          </div>
        </div>
      </form>
    </div>
  </template>

images.js

import './images.html';

Template.images.events({
  'change .myFileInputimagepub':function(evt,tmpl){
    FS.Utility.eachFile(event,function(file){
      fileImagespub.insert(file,function(err,fileObj){
        if(!err){
          var userId = Meteor.userId();
          var imageurl = {
            ‘photo.image':'/cfs/files/fileimages/' + fileObj._id
          };
          setTimeout(function(){
            Meteor.users.update(userId,{$set:imageurl});
          },200);
        }
      })
    })
  },


});

服务器

权限/permissions.js

Meteor.users.allow({
  insert:function(userId,doc){
    return userId;
  },
  update:function(userId,doc,fields,modifier){
    return userId && doc._id === userId;
  },
  remove:function(userId){
    return userId;
  }
});

fileImagespub.allow({
  insert:function(){
    return true;
  },
  update:function(){
    return true;
  },
  remove:function(){
    return true;
  },
  download:function(){
    return true;
  }

Both/collections/fileupload.js

var filepubimagestorage = new FS.Store.GridFS("fileimagesp");
fileImagespub = new FS.Collection("fileimages",{
  stores:[filepubimagestorage]
});

Answer 1

欢迎来到 SO。查看代码的以下部分：

FS.Utility.eachFile(event,function(file){
  fileImagespub.insert(file,function(err,fileObj){
    if(!err){
      var userId = Meteor.userId();
      var imageurl = {
        ‘photo.image':'/cfs/files/fileimages/' + fileObj._id
      };
      setTimeout(function(){
        Meteor.users.update(userId,{$set:imageurl});
      },200);
    }
  })

您正在为用户覆盖 imageurl，因为您使用 $set 替换该字段。您应该将其视为一个数组并将图像 url 推送给它。如果只有一张图片，您最终会得到一个大小为 1 的数组，这对所有人来说都很好。

为此，您可以使用 Mongo push：

FS.Utility.eachFile(event,function(file){
  fileImagespub.insert(file,function(err,fileObj){
    if(!err){
      var userId = Meteor.userId();
      setTimeout(function(){
            Meteor.users.update(userId,{$push:{'photo.image':'/cfs/files/fileimages/' + fileObj._id}});
      },200);
    }
  })

请注意，这不是最终解决方案，因为它既没有解决替换图像、删除图像等用例（您应该自己尝试，如果遇到问题请返回这里).
请注意，使用旧字段 photo.image 的其他上传现在不再可用。已经 photos.image 的用户可能会在尝试推送时抛出错误（预期数组得到字符串）。这是一个很好的例子，在开始编码之前应该首先解决设计问题，以避免这样的问题。因为您现在正在处理多个图像，所以您还应该考虑将 photo.image 重命名为 photo.images。为了更好地理解，我保留了原来的方式。
请注意，您还需要在迭代此数组的模板中进行更改：

<div>
{{#each currentUser.photo.image}}
    <img src="{{this}}" alt="Image" width="60px" height="60px"  value=''/>
{{/each}}
</div>

但是，还有一个旁注。首先，这都是客户端代码，您应该在信任任何客户端上传之前验证您的数据。

Allow/deny is discouraged to use and Meteor methods should be used instead. If you still insist on using allow/deny, please also read the latest security blog article on allow/deny vlunerabilties.

多FS采集流星

Multiple FS Collection Meteor

mongodb

gridfs

meteor

collectionfs