MysqlでBLOB型データを読み込む方法について
「最近プロジェクトに取り組むと、初心者はかなり多くの問題に遭遇します。いいえ、データベースに保存されているユーザー アバターに遭遇しました。それは BLOB フィールドでした。それをバックエンドから取り出してフロントエンドに渡しました。フロントエンドができないことがわかりました 表示には、それがバッファ型のオブジェクトであることが判明したため、src が見つかりません。次のステップは、このオブジェクトをテキストに変換する方法を見つけて、以前に保存したフィールドを完全に読み出すことができ、多くの結果が得られます。奇妙なことに、最初に次のコードを使用しました。
var buffer = new Buffer.from(Blob);
var basebuffer=buffer.toString('base64')
その結果、読み出した文字列が使えないことが分かり、再度連結を行いました。
res.send({
avatar:'data:image/png;base64,'+basebuffer
})
img の src 属性で読み込むbase64系画像のプレフィックスの問題かと思ったのですが、結局表示できずエラーも報告されませんでした！
考えた結果、mysql に戻ることにしました。blob 型データを読み込んで変換できる Convert (utf8 を使用したアバター) 関数があったことを思い出しました。しかし、それはまだ処理する必要があります。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') } //回溯路由
私はここで成功しました。皆さんのお役に立てれば幸いです。