Tengo un proyecto de compras en línea en Spring Boot. Hay una página de perfil de usuario en la que el usuario puede actualizar su imagen de perfil. Por ahora, la imagen de perfil se carga correctamente, pero cuando actualizo o vuelvo a cargar la página, no se muestra la nueva imagen cargada. Cada vez que necesito cerrar sesión y volver a iniciar sesión, puedo ver mi imagen actualizada.

A continuación se muestra el script para cargar la imagen en el servidor. Aquí he creado la API REST para convertir el archivo en URL y luego guardar esa URL en mi base de datos.

 $("#file").change(function(){ var formData = new FormData(); var fileSelect = document.getElementById("file"); if(fileSelect.files && fileSelect.files.length == 1) { var file = fileSelect.files[0]; formData.set("file",file,file.name); }else{ $("#file").focus(); return false; } var request = new XMLHttpRequest(); try { request.onreadystatechange=function() { if(request.readyState==4) { var v = JSON.parse(request.responseText); if(v.status==="OK") { document.getElementById('imagepath').value = v.response; // Fetched image url from DB and set into a hidden input field. userprofilepic(); } } } request.open('POST',"<%=AkApiUrl.uploadfile%>"); request.send(formData); } catch(e) { swal("Unable to connect to server","","error"); } })

Esta es la función en la que se carga la imagen del perfil de usuario y se puede ver.

 function userprofilepic(){ var img = document.getElementById('imagepath').value; var url = "api/updateprofilepic"; $.post(url, { userid : '<%=loginuserid%>', img : img, }, function(data, status) { if (data.status == "OK") { if (data.statusCode == 1) { swal({title: "Yippee! Image Uploaded!", text: "User Image Uploaded Successfully", type: "success"}, function(){ location.reload(); }) } else { var error = data.responseMessage; swal(error, "", "error"); } } else { var error = data.responseMessage; swal(error, "", "error"); } }); }

Ayúdenme sugiriendo una posible solución para cargar la imagen de perfil y debería estar visible cuando el usuario vuelva a cargar la página o cuando la cargue.

Captura de pantalla para mostrar el campo de imagen de perfil de usuario