사용자가 프로필 사진 (Cloudinary api 사용)을 업데이트 할 수있는 버튼이 프런트 엔드에 있으며 기본적으로 내 nodejs 게시 요청을 호출하고 사용자 데이터를 전달하여 db를 쿼리하고 프로필 사진 URL을 업데이트 할 수 있습니다. 훌륭하게 작동하지만 해당 함수를 호출 한 후 페이지를 리디렉션 / 렌더링하지 않습니다.
여기에 내 프런트 엔드가 있습니다 (Cloudinary 및 js 포함)
<input type="hidden" name="" id="employee_num" value="<%= data[i].EMPLOYEE_NUM %>">
<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>
<script type="text/javascript">
var myWidget = cloudinary.createUploadWidget({
cloudName: 'xxx',
uploadPreset: 'xxx'}, (error, result) => {
if (!error && result && result.event === "success") {
console.log('Done! Here is the image info: ', result.info);
console.log(result.info.secure_url)
var result_url = result.info.secure_url;
console.log("result url is " + result_url)
document.getElementById("url").value = result_url;
var employee_num = document.getElementById('employee_num').value;
fetch('/changeProfileImage', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
result_url,
employee_num
})
})
}
}
)
document.getElementById("upload_widget").addEventListener("click", function(){
myWidget.open();
}, false);
</script>
이제 아래는 게시물 요청에 대한 내 nodejs 함수입니다. /changeProfileImage
app.post('/changeProfileImage', (req, res) => {
if (req.session.loggedin) {
var employee_num = req.body.employee_num;
var url = req.body.result_url;
console.log("e " + employee_num)
console.log("u " + url)
var changeProfileImage = "update EMPLOYEES set (PROFILE_IMAGE)= '" + url + "' where EMPLOYEE_NUM = '" + employee_num + "'";
ibmdb.open(ibmdbconnMaster, function (err, conn) {
if (err) return console.log(err);
conn.query(changeProfileImage, function (err, rows) {
if (err) {
console.log(err);
}
res.redirect('/account');
conn.close(function () {
});
})
})
} else {
res.render('login.ejs')
}
})
지저분한 코드에 대해 용서해주세요. 위의 내용은 필요한 모든 것입니다. 그것은 기본적으로 내 콘솔에 모든 것을 업데이트하고 성공적으로 통과했다고 말하지만 사실이지만 결코 새로 고쳐지지 않습니다. 어떤 아이디어?
문제는 AJAX 호출을 수행하고 있으므로 js가 서버에 HTTP 요청을 보내고 전체 페이지가 아니므로 가져 오기 콜백에서 수동으로 수행해야합니다.
fetch('/changeProfileImage', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
result_url,
employee_num
})
}).then(response => {
if (response.redirected) {
window.location.href = response.url;
})
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다