J'ai un backend Flask qui envoie une image au frontend Vue comme décrit ici :
with open('my_image_file.jpg', 'rb') as f:
image_data = f.read()
emit('IMAGE', {'image_data': image_data})
Dans le front-end de Vue, cette image devrait éventuellement être affichée sur la page web. Je suppose que le moyen le plus simple consiste à enregistrer les images dans un dossier statique. Dans mon magasin, j'aurais une action comme celle-ci :
const actions = {
SOCKET_IMAGE (commit, image) {
console.log("image received")
/* 需要做什么来将图片保存在 'static/' 中？*/
commit.commit('image_saved')
}
}
J'aimerais également essayer d'autres méthodes pour enregistrer des images et les rendre sur le Web. Puis-je enregistrer des images directement dans la boutique Vuex ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous pouvez stocker des données d'image dans Vuex
Stockage :
const state = { imgData: null }En supposant que vous obtenez
base64de l'API, veuillez soumettre les données brutes :commit('SET_IMAGE_DATA', image);Ou, si vous avez
ArrayBuffer, convertissez d'abord :function _arrayBufferToBase64( buffer ) { var binary = ''; var bytes = new Uint8Array( buffer ); var len = bytes.byteLength; for (var i = 0; i < len; i++) { binary += String.fromCharCode( bytes[ i ] ); } return window.btoa( binary ); } const imgData = _arrayBufferToBase64(image) commit('SET_IMAGE_DATA', imgData);Trouvez la méthode pour convertir ArrayBuffer en base64ici
et utilisez-le dans vos modèles :
<template> <div> <img :src="'data:image/png;base64,' + $store.state.imgData" /> </div> </template>