javascript - 我想添加一个 profilePicture 并将其保存在 NEDB
问题描述
我知道此代码,但无法保存图片。当我注销并再次登录时,URL 会更改。我可以用这个代码做点什么,还是我可以使用另一个代码?我听说我可以转换为 Base64 字符串,但我不知道我是怎么做的或者在哪里做的。
网址是:blob: http: //127.0.0.1 :5502/591a0f75-2ed9-4011-b59a-7c2ea668e534
window.addEventListener('load', function() {
document.querySelector('input[type="file"]').addEventListener('change', function() {
if (this.files && this.files[0]) {
var img = document.querySelector(".myImg"); // $('img')[0]
img.onload = imageIsLoaded;
img.src = URL.createObjectURL(this.files[0]); // set src to blob url
}
});
});
});
<div class="Profil__Picture-Button">
<img src="./img/LogoFinderV21.png" alt="your image" class="Profile__Profile-Picture myImg">
<input type="file" />
</div>
app.post('/login', async(req, res) => {
user = await collectionsNEDB.users.find({})
let matchedUser
for (let i = 0; i < user.length; i++) {
console.log(user[i].username)
console.log(user[i]._id)
if (req.body.username == user[i].username && req.body.password == user[i].password) {
matchedUser = user[i]
break
}
}
if (matchedUser) {
const payload = { userId: matchedUser._id }
const token = jwt.sign(payload, "hej", { expiresIn: '1s' })
res.json({ token, userId: matchedUser._id, user })
} else {
res.status(403).json({ error: 'Invalid Credentials' })
}
})
app.get('/secured', auth, (req, res) => {
res.json({ message: `${req.user}` })
})
我将图像添加到 NEDB 的代码:
async function updateUser(age, city, gender, games, discord, steam, origin, image) {
const id = localStorage.getItem("userId")
const response = await fetch('http://localhost:8080/users/' + id, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
age: age,
city: city,
gender: gender,
games: games,
usernameDiscord: discord,
usernameSteam: steam,
usernameOrigin: origin,
image: image
})
})
console.log(response)
const data = await response.json()
console.log(data)
}
function updateUsersIndex() {
let updateProfileBtn = document.querySelector(".Profile-Right__Update")
console.log(updateProfileBtn)
updateProfileBtn.addEventListener("click", async(event) => {
console.log("hej")
event.preventDefault()
const age = document.querySelector(".Age__Input").value
const city = document.querySelector(".City__Input").value
const gender = document.querySelector(".Gender__Input").value
const discord = document.querySelector(".Discord__Input").value
const steam = document.querySelector(".Steam__Input").value
const origin = document.querySelector(".Origin__Input").value
const games = document.querySelector(".Profile-Right__Select-Game").value
const image = document.querySelector(".Profile__Profile-Picture").src
const hidden = document.querySelector(".hidden")
const updateUsers = await updateUser(age, city, gender, games, discord, steam, origin, image)
window.location.reload(true)
toggling([".Profile__Wrappe"])
})
}
updateUsersIndex()
解决方案
推荐阅读
- java - 使用 javapackager 时如何合并未命名的模块
- javascript - React TypeError:无法读取未定义的属性“searchField”
- python-3.x - 使用 if 创建新列,否则来自列表的语句
- websphere - 将参数动态传递给 wsadmin.sh 中使用的 jython
- python-3.x - 如何用 strptime 解析特定的日期格式?
- java - java.lang.ClassNotFoundException: com.vuforia.VuforiaUnityPlayer.VuforiaInitializer
- ms-access - 在查询中使用多选列表框
- r - R:抑制基本图形绘图但将绘图作为对象返回
- uwp - 项目创建后如何更改应用程序名称?
- python - Python 版本无关的字符串处理