About the method of reading BLOB type data in Mysql
When working on projects these days, novices encounter quite a lot of problems. No, I encountered a user avatar stored in the database, and it was a BLOB field. I took it out of the back-end and gave it to the front-end. I found that the front-end could not The display shows that it turns out to be an object of type buffer, so the src cannot be found. The next step is to find ways to convert this object into text to see if the previously saved fields can be read out completely, and there are a lot of results. Weird stuff, first I used the following code
var buffer = new Buffer.from(Blob);
var basebuffer=buffer.toString('base64')
As a result, I found that the string I read out was unusable, so I made another concatenation.
res.send({
avatar:'data:image/png;base64,'+basebuffer
})
I thought it was a problem with the prefix of the base64 type image read by the src attribute of img, but in the end it still couldn't be displayed and no error was reported!
After thinking about it, I decided to go back to mysql. I remember that there is a convert (avatar using utf8) function that can read blob type data and convert it. However, it still needs to be processed. It needs an as field to facilitate subsequent reading, because js I can’t understand this kind of field with various spaces~
Here’s the code:
db.query('select convert(avatar using utf8) as newavatar from userinfo where username=?',result[0].username,function(err,result)
{
if(err)
{
return res.send({
status:1,
msg:"拿到图像错误！"
})
}
baseavatar=result[0].newavatar
console.log(baseavatar);
res.send(JSON.stringify({
status:0,
msg:"登录成功！",
token:'Bearer '+token,
username:userinfo.username,
avatar:baseavatar
}))
})
Front-end part:
<img src="../public/username.png" alt="" srcset="" id="displayimg">
mounted () {
if (store.state.token !== '') {
console.log('已经登录！'); this.token = store.state.token
const headimg = document.getElementById('displayimg')
headimg.src = store.state.avatar
} else {
console.log('未登录！') }
if (store.state.username !== '') {
console.log(store.state.username) }
}
//login部分
login () {
fetch('http://127.0.0.1:3006/api/login', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: this.username,
password: this.password
})
}).then(res => res.json())
.then(res => {
alert(res.msg)
store.commit('settoken', res.token)
store.commit('setusername', res.username)
store.commit('setavatar', res.avatar)
if (res.status === 0) {
this.$router.push('/self') } //回溯路由
I succeeded here, I hope it can help everyone.