nodejs lee datos de imagen de tipo blob en mysql

Sobre el método de lectura de datos tipo BLOB en Mysql

Al trabajar en proyectos hoy en día, los principiantes encuentran muchos problemas. No, cuando encontré un avatar de usuario almacenado en la base de datos y era un campo BLOB, lo saqué del back-end y se lo pasé al frente. -end. Descubrí que el front-end no podía La pantalla muestra que resulta ser un objeto de tipo buffer, por lo que no se puede encontrar el src. El siguiente paso es encontrar formas de convertir este objeto en texto para ver si Los campos previamente guardados se pueden leer completamente y hay muchos resultados. Cosas raras, primero usé el siguiente código.

var buffer = new Buffer.from(Blob);
var basebuffer=buffer.toString('base64')

Como resultado, descubrí que la cadena que leí no se podía utilizar, así que hice otra concatenación.

res.send({
    
    
avatar:'data:image/png;base64,'+basebuffer
})

Pensé que era un problema con el prefijo de la imagen tipo base64 leída por el atributo src de img, pero al final aún no se pudo mostrar y no se informó ningún error.
Después de pensarlo, decidí volver a mysql. Recuerdo que hay una función de conversión (avatar usando utf8) que puede leer datos tipo blob y convertirlos. Sin embargo, aún necesita ser procesado. Necesita un campo para Facilite la lectura posterior, porque js no puedo entender este tipo de campos con varios espacios ~
Aquí está el código:

 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
            }))
        })

Parte frontal:

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

Tuve éxito aquí, espero que pueda ayudar a todos.

Supongo que te gusta

Origin blog.csdn.net/weixin_51295863/article/details/128776960
Recomendado
Clasificación