从JS数组显示不正确的用户个人资料图片 - 如何解决这个问题？ [英] Incorrect user profile picture being displayed from JS array - How to address this?

问题描述

很抱歉很长的帖子，但我不确定在没有所有代码的情况下会遇到这个问题。

Sorry for the long post, but I'm not sure the issue comes across without all the code.

我正在使用parse.com和JavaScript SDK 。

I'm using parse.com and the JavaScript SDK.

以下代码是我的用户个人资料页面的一部分，它会在屏幕上显示他们的个人资料图片并允许他们更改。

The below code is part of my users profile page, it displays their profile picture to them on screen and allows them to change it.

更改个人资料图片工作正常，并按预期上传。问题是，在配置文件页面上，配置文件将获取第一个用户图片并在页面上显示给任何用户。基本上它没有看当前用户。

Changing the profile picture works fine and is uploaded as expected. The issue is that on the profile page the profile is taking the first users picture and displaying it on page for any user. Basically its not looking at the current user.

我认为我需要更新查询以包含类似 var currentUser = Parse.User的内容。 current（）; 并将其引入我的代码中。无论我为什么尝试这样做，我都会碰到一堵砖墙。任何帮助都会很棒

I think that I need to update the query to include something like var currentUser = Parse.User.current(); and introduce it into my code. Whatever why I try and do this I'm hitting a brick wall. Any help would be great

如果要了解如何更改我的代码以避免这种情况发生这种情况我会苦苦挣扎吗？

I'm struggling if this is the case to understand how to change my code to avoid this happening?

/////////////////////////Queries the users profile picture and shows on page////////////////////////

var UserProfilePic = Parse.Object.extend("_User");
var query = new Parse.Query(UserProfilePic);
query.exists("ProfilePic");
query.find({
    success: function(results) {
        // If the query is successful, store each image URL in an array of image URL's
        imageURLs = [];
        for (var i = 0; i < results.length; i++) {
            var object = results[i];
            imageURLs.push(object.get('ProfilePic').url());
        }
        // If the imageURLs array has items in it, set the src of an IMG element to the first URL in the array
        if (imageURLs.length > 0) {
            $('#profile_pic').attr('src', imageURLs[0]);
        }
        $('#Image01').attr('src', imageURLs[0]); //first image
    },
    error: function(error) {
        // If the query is unsuccessful, report any errors
        alert("Error: " + error.code + " " + error.message);
    }
});


///////// Saves the users profile image and fields after the #save button is clicked//////

var profileSave = Parse.User.current();

function ProfileSave() {

    var User = Parse.Object.extend("_User");

    var profileSave = Parse.User.current();

    var saveusername = $('#username').val();
    var saveemail = $('#email').val();
    var savegender = $('#gender').val();


    profileSave.set("username", saveusername);
    profileSave.set("email", saveemail);
    profileSave.set("gender", savegender);


    profileSave.save(null, {
        success: function(profileSave) {
            profileSave.save();
            console.log("DONE");
            alert("Profile Saved");
        },
        error: function(profileSave, error) {
            // Fail

        }
    });



}


///////////////Allows the user to upload a profile image and store///////////////////////

$(document).ready(function() {

    var parseAPPID = "XXXXXX";
    var parseJSID = "XXXXXX";

    //Initialize Parse
    Parse.initialize(parseAPPID, parseJSID);

    $("#fileUploadBtn").on("click", function(e) {

        var fileUploadControl = $("#fileUploader")[0];
        if (fileUploadControl.files.length > 0) {
            var file = fileUploadControl.files[0];
            var name = file.name;
            console.log("here goes nothing...");
            var parseFile = new Parse.File(name, file);
            parseFile.save().then(function() {
                console.log("Worked!");
                console.dir(arguments);
                var User = Parse.Object.extend("_User");
                var jobApplication = Parse.User.current();

                jobApplication.set("ProfilePic", parseFile);
                jobApplication.save();

                var profilePhoto = jobApplication.get("ProfilePic");
                console.log("Done");

                //jobApplication.get("ProfilePic").url;

            }, function(error) {
                console.log("Error");
                console.dir(error);
            });
        }

    });


});

推荐答案

在特色/赏金中找到这个，即使我回答了这里对你而言，这是我的复制/粘贴答案：

Just found this in the featured/bounties, even though I answered it here for you, so here's my copy/pasted answer:

你没有像你想象的那样使用query.exists（）。此外，您是否只是想检查当前用户是否有个人资料图片？因为你只能使用 .has（key）对象方法，而用户就是一个对象。如果这是云代码而不是客户端代码，则可能必须先获取用户。如果是客户端代码，您应该已经有了最新的用户。

You're not using query.exists() the way you think you are. Also, are you just trying to check to see if the current user has a profile image? Because you can just use the .has("key") method of objects, and a user is an object. If this is in cloud code, rather than client code, you may have to fetch the user first. If it is client code, you should already have an up to date user.

您不应该扩展用户对象。根本没必要。使用Parse.User对象类型，因此如果您要查询用户，请执行 var query = new Parse.Query（Parse.User）;

You should not be extending the user object. Not necessary at all. Use the Parse.User object type, so if you're querying for users, do var query = new Parse.Query( Parse.User );

所以我认为你想要的更像是：

So I think what you want is something more like:

var user = Parse.User.current();
if( user.has("ProfilePic") )
{
    //Do your stuff with the image
    var imageURL = user.get("ProfilePic").url();
    $('#Image01').attr('src', imageURL);
}
else
{
    alert("Error: User does not have a 'ProfilePic' set");
}

您的代码设置方式，您只需查询所有代码用户使用profilePics并获取第一个。我的代码只获取当前用户的profilePic。

The way your code is set up, you're just querying through all the users with profilePics and taking the first one. My code only gets the profilePic of the current user.

这篇关于从JS数组显示不正确的用户个人资料图片 - 如何解决这个问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！