如何显示正确的个人资料图片 Meteorjs

Question

我正在使用 CollectionFs 上传个人资料图片。上传和存储图片成功。我可以为一位用户插入和显示图像，但是 问题是： 对于多个用户，当用户访问其他用户的个人资料时，他看到的是自己的照片，而不是个人资料所有者的照片！

我知道我的帮助函数中的 mongo 查询导致了问题，但无论我尝试多少“This._id”都无法让它工作。

这里是javascript

 Router.route('show',{
  path:'/list/:_id',
  data: function(){
return Main_database.findOne({_id: this.params._id});


  }

});

 Template.upload.events({
  'change #exampleInput':function(event, template){  
    var file = $('#exampleInput').get(0).files[0]; 
    fsFile = new FS.File(file);
    fsFile.metadata = {ownerId:Meteor.userId()}
    Images.insert(fsFile,function(err,result){
      if(!err){
        console.log("New images inserted")
      }
    })
  }
});

Template.profile.helpers({
    profilePic: function () {
      return Images.find({'metadata.ownerId':Meteor.userId()});
    }
  });

这里是html：

<template name="upload">
  <div class="container">
     <div class="row">
        <input type="file" 
        id="exampleInput"> 
     </div>  
  </div>
</template>


 
<template name="profile">

       {{#each profilePic}}       
          <img src="{{this.url}}" 
          height="400" width="400" 
          class="img-circle">
       {{/each}}  
 
</template>

谢谢

B.s：按照给出的答案后，我在 profile.xxx 字段中附加了照片。但它仍然显示错误的图片。 mongo查询还是显示错误的图片。

这里是代码，

Router.route('show',{
  path:'/list/:_id',
  data: function(){
return Main_database.findOne({_id: this.params._id});


  }

});

Template.upload.events({
  'change #exampleInput':function(event, template){  
    var file = $('#exampleInput').get(0).files[0]; 
    newFile = new FS.File(file);
    newFile.metadata = {'ownerId':Meteor.userId()};
    Images.insert(newFile,function(err,result){
      if(!err){
        console.log(result._id);
        Meteor.users.update(Meteor.userId(),{
       $set: {
         'profile.profilePic': result._id

       }
     });
       }
     });

      }
    })



// .....................profile pic.............


Template.profile.helpers({
    profilePicture: function () {
      return Images.find({'_id':Meteor.user().profile.profilePic});
    }
  });

Answer 1

对于profilePic，它将返回相同的用户个人资料图片，而您应该通过_id而不是metadata.ownerId进行查询

要做到这一点，当您插入图片时，您应该在用户集合中为该图片提供参考，例如：

Images.insert(file, function (err, res) {
  if (!err) {
     Meteor.users.update(Meteor.userId(),{
       $set: {
         'profile.profilePic': res._id,
       }
     });
});

当您需要显示图像时，您可以执行以下操作：

Template.profile.helpers({
    profilePic: function () {
      return Images.find({'_id':Meteor.user().profile.profilePic});
    }
 });

Answer 2

第一件事：Meteor.user() 和 Meteor.userId() 始终显示当前登录用户的数据。

因此，当用户想查看自己的个人资料时，可以像这样使用您当前的模板助手：

Template.profile.helpers({
    profilePic: function () {
        return Images.find({'metadata.ownerId':Meteor.userId()});
    }
});

但是当用户转到另一个用户的个人资料时，您应该像这样获取该用户的信息：Meteor.user("another-user-id");

那么怎么做呢？假设您已经使用 Iron Router 或 Flow Router 在 Meteor 应用程序中设置了路由，并且对于用户配置文件页面，您设置了类似这样的路由路径：/user/:_id。

现在，您想在server 上的出版物中仅publish 该用户的此类数据：

Meteor.publish("userData", function(userId){
    return = Meteor.users.find({"_id": userId});
});

...和subscribe 到client 上的这个publication（我们将使用模板级订阅！）

1. 使用 Iron Router：

   var userId;
   
   Template.profile.onCreated(function() {
       var self = this;
       self.autorun(function() {
           userId = Router.current().params._id;
           self.subscribe("userData", userId);
       }
   });
   
   Template.profile.helpers({
       profilePic: function () {
           return Images.find({'metadata.ownerId': userId});
       }
   });
   

2. 使用 FlowRouter：

   var userId;
   
   Template.profile.onCreated(function() {
       var self = this;
       self.autorun(function() {
           userId = FlowRouter.getParam("_id");
           self.subscribe("userData", userId);
       }
   });
   
   Template.profile.helpers({
       profilePic: function () {
           return Images.find({'metadata.ownerId': userId});
       }
   });
   

Answer 3

终于可以做到了。作为一个初学者，我被困在上传图片，然后为我的用户展示了好几天。几乎所有的方法都试过了，都没有用。到处问，没有一个答案有效。最后，来自cosio55:autoform-cloudinary 的一个简单的软件包就像魔术一样工作！！！看看我在使用这些包时遇到的问题：

1. cfs:ui

{{#with FS.GetFile "images" selectedImageId}} // image url {{/with}}

问题：

我无法得到selectedImageId。

2。 cfs:gridfs

问题：

grid fs 将图像存储在单独的集合中。我的用户列表使用 Iron 路由器从另一个集合中显示用户列表。图像正在上传到图像集合中。但是为了我生命中的挚爱，我无法正确地展示它们。每个用户看到的是他自己的照片，而不是个人资料所有者的照片。由于错误的 mongo 查询而发生，但我无法获得正确的查询。尝试将照片附加到 profile.profilePicture 中，但仍然存在错误图像的问题。

我不得不将上传的照片放在单独的页面中，而不是放在自动表单中。

3。 lepozepo:cloudinary 问题： 图片上传正常。但是在获取/存储图像 url 时遇到问题。无法获取

我不得不将上传的照片放在单独的页面中，而不是放在自动表单中。

public_id ?????在那儿迷路了。

4. yogiben 的 autoform-file

与 GridFs 相同的问题。

终于有了这个cosio55:autoform-cloudinarypackage，我只花了一分钟就搞清楚了。一分钟 vs 几天其他大牌包！！！！

：笑脸：

<div> <img src=" {{image}}" alt=""> Image </div>

只需在img 源中添加{{image} 即可。图片 url 存储在同一个集合中，autoform 存储了所有内容。

朋友们加油。