javascript - 无法识别删除个人资料图片并显示头像

标签 javascript html meteor cloudinary

我使用 Meteor 和 Cloudinary 来显示上传和显示个人资料图像。

问题 删除个人资料图像后(通过图像 id),字段 profilepicId 仍然存在,但显示未定义。因此,帮助者似乎无法判断 profilepicId 是否存在,并不断显示 Gravatar(尽管有上传的图片)或在删除图片时不显示任何 gravatar。

使用 Mongol,该字段显示 "profilepicId": {}

上传图片时的控制台(显示长度但未定义值?)
When img is uploaded and exists


删除图片时的控制台(全部未定义)
When img deleted

个人资料 html

{{#with currentUser}}
   {{#if profilepicId}}
       <img src="{{c.url profilepicId format=format gravity='faces' mode='thumb' crop='thumb' width=60 height=60}}">
   {{else}} 
       <div class="avatar" style="background: url({{avatar 40}}); height: 50px; width: 50px; float:left;"></div>
   {{/if}}
{{/with}}

配置文件js

Template.profile.onCreated(function(){
   var self = this;
   self.autorun(function(){
      self.subscribe('user', Meteor.userId());
      $.cloudinary.config({ cloud_name: "XX", api_key: 'XX' }); 
   });
});

Template.profile.helpers({
   user: function () {
      return Meteor.user(); 
   },
   profilepicId: function (){ 
      var u = Meteor.user().profile; 
      if( u.profilepicId === undefined || u.profilepicId === null){ 
         return false
      }
   }
});

最佳答案

您指出的第一件事是:

Using Mongol, the field shows "profilepicId": {}

...但是如果我理解你在说什么,你正在检查它是否未定义。你是说,一旦图像被删除,那个字段就是一个空的 JSON 对象?因为那不是未定义的不是。在那种情况下,删除图像时更新配置文件的代码在哪里?

除此之外,您的代码可以大大简化。

首先,我认为您不需要帮助程序来获取 profilepicId。你可以在 Blaze 中使用 currentUser 来完成这一切:

{{#with currentUser}}
   {{#if profile.profilepicId}}
       <img src="{{c.url profile.profilepicId format=format gravity='faces' mode='thumb' crop='thumb' width=60 height=60}}">
   {{else}} 
       <!-- gravatar -->
   {{/if}}
{{/with}}

让我们看看您的 onCreated():

Template.profile.onCreated(function(){
   var self = this;
   self.autorun(function(){
      self.subscribe('user', Meteor.userId());
      $.cloudinary.config({ cloud_name: "XX", api_key: 'XX' }); 
   });
});
  1. 此模板是否会在用户更改时更新?如果没有,为什么会有自动运行?
  2. 这个“用户”订阅是什么?它会做普通用户发布不会做的事情吗?
  3. 为什么要多次配置 cloudinary?只需执行一次(例如在客户端启动时)
  4. 为什么要将 api_key 放在客户端上?仅服务器配置需要该数据。客户端配置只需要 cloud_name。客户端上的 api_key 不安全。

除非有什么我不明白的地方(很可能是因为#2),否则我认为你不需要任何东西。 (当然,配置会移至客户端启动)。

而且我也没有在您需要的帮助程序中看到任何内容,因为您可以在 Blaze 中将所有内容从 currentUser 中删除。

所以,简而言之,当个人资料图片被删除时,Meteor.user().profile 是什么样子的,那段代码在做什么?也就是说,该字段真的未定义,还是一个空的 JSON 对象?

更新:

对于 Cloudinary 配置,我在客户端 (client/index.js) 上有这个:

Meteor.startup(() => {
    $.cloudinary.config({
        cloud_name: Meteor.settings.public.cloudinary.cloud_name
    });
}

我从设置文件中提取信息,但您可以对其进行硬编码以开始使用。

在服务器上(server/startup/cloudinaryConfig.js):

Meteor.startup(() => {
    Cloudinary.config({
        cloud_name: Meteor.settings.private.cloudinary.cloud_name,
        api_key: Meteor.settings.private.cloudinary.api_key,
        api_secret: Meteor.settings.private.cloudinary.api_secret
    });
});

要进行设置,我的 settings.json 具有以下结构:

{
    "public": {
        "cloudinary": {
            "cloud_name": "foo"
        }
    },
    "private": {
        "cloudinary": {
            "cloud_name": "foo",
            "api_key": "xxx",
            "api_secret": "yyy"
        },
    }
}

哦,值得一提的是我正在使用这个包(我想你也在使用同样的包):https://atmospherejs.com/lepozepo/cloudinary

关于javascript - 无法识别删除个人资料图片并显示头像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41657933/

相关文章:

javascript - 我应该使用 HTML 属性还是类来指定输入字段的状态?

javascript - Firebase 获取数据的时间过长 ( javascript )

javascript - marklogic 中的 JSON 模式验证

php - 如何为 XPath 查询选择多个属性

javascript - Meteor:响应式(Reactive)连接公开中间数据

javascript - 使用jqLit​​e隐藏和显示html元素

javascript - 如何暂停JavaScript代码执行

javascript - 如何在选中和取消选中时为html中的复选框赋值?

meteor 火光一个个里面一个个

javascript - 将 var 乘以数字插入 mongodb