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

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值