如何显示正确的个人资料图片 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 它将 return 相同的用户个人资料图片，您应该通过 _id 而不是 metadata.ownerId

进行查询

为此，当您插入图像时，您应该在用户 collection 中参考图像：

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.

现在，您希望 publish 在您在 server 上的出版物中仅 publish 这样的用户数据：

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

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

使用 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});
    }
});

使用 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

终于可以做到了。作为初学者，我一直坚持上传图片，然后向用户展示这些图片好几天了。尝试了几乎所有的方法，none 奏效了。到处询问，none 的答案有效。最后，来自 cosio55:autoform-cloudinary 的一个非常简单的包像魔术一样工作！！！看看我在使用这些包时遇到的问题：

1. cfs:ui

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

问题：

这是我无法得到 selectedImageId .

2。 cfs:gridfs

问题：

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

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

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

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

public_id ??????迷路了。

4。 yogiben

的自动表格文件

与 GridFs 相同的问题。

终于有了这个 cosio55:autoform-cloudinary 软件包，我只花了一分钟时间就弄明白了。一分钟vs天其他大牌套餐！！！

：笑脸：

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

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

朋友们干杯。

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

How to show correct profile picture Meteorjs

meteor

collectionfs