Saya mempunyai bahagian belakang Flask yang menghantar imej ke bahagian hadapan Vue seperti yang diterangkan di sini:
with open('my_image_file.jpg', 'rb') as f: image_data = f.read() emit('IMAGE', {'image_data': image_data})
Di bahagian hadapan Vue, imej ini akhirnya akan dipaparkan pada halaman web. Saya rasa cara paling mudah ialah menyimpan imej dalam folder statik. Di kedai saya, saya akan mempunyai tindakan seperti ini:
const actions = { SOCKET_IMAGE (commit, image) { console.log("image received") /* 需要做什么来将图片保存在 'static/' 中？*/ commit.commit('image_saved') } }
Saya juga ingin mencuba kaedah lain untuk menyimpan imej dan memaparkannya di web. Bolehkah saya menyimpan imej terus di kedai Vuex?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda boleh menyimpan data imej dalam Vuex
Storan:
const state = { imgData: null }Dengan mengandaikan anda mendapat
base64daripada API, sila serahkan data mentah:commit('SET_IMAGE_DATA', image);Atau, jika anda mendapat
ArrayBuffer, tukar dahulu: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);Cari kaedah untuk menukar ArrayBuffer kepada base64di sini
dan gunakannya dalam templat anda: