nodejs读取mysql中blob类型的图片数据

关于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') }  //回溯路由

我到这里就成功了,希望可以带给大家帮助。

猜你喜欢

转载自blog.csdn.net/weixin_51295863/article/details/128776960