关于Mysql中BLOB类型数据读取方法
这几天搞项目,新手遇到的问题还是挺多的,这不,遇见一个用户头像存储到数据库中,而且还是BLOB类型的字段,我从后端拿出来后给到前端,发现前端并不能显示,一看竟然是type为buffer类型的对象,那就src不到了,接下来就是各种找办法将这个对象转为text,看看能不能将之前存进去的字段完整读出来,结果一堆奇奇怪怪的东西,首先我是先使用下面这个代码
var buffer = new Buffer.from(Blob);
var basebuffer=buffer.toString('base64')
结果我发现读出来的这个string用不了,于是我再做了一个拼接
res.send({
avatar:'data:image/png;base64,'+basebuffer
})
还以为是img的src属性读base64类型图片的前缀问题,但是最后还是显示不了,也没有报错!
想来想去,我决定还是回到mysql中,记得有convert(avatar using utf8)这个函数可以读取blob类型的数据并转化,不过还要处理一下,需要as一个字段方便后面的读取,因为js读不懂这种带各种各样空格的字段啦~
上代码:
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
}))
})
前端部分:
<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') } //回溯路由
我到这里就成功了,希望可以带给大家帮助。