Question

我目前正在使用Meteor collectionFS，为了能够上传图片，项目工作正常，但只有在我想上传并查看单个图片时才有效。我想要的是选择2个或更多图像并正确可视化，在输入中我使用的是多重属性，但我如何看到图像？

客户端 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 / 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;
  }

两者/集合/ 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>

然而，仍然有一个旁注。首先，这是所有客户端代码，您应该在信任任何客户端上载之前验证您的数据。

允许/拒绝is discouraged to use，而应使用Meteor方法。如果您仍然坚持使用允许/拒绝，请同时阅读最新的安全性blog article on allow/deny vlunerabilties。

多个FS收集流星

1 个答案: