My current task involves taking an image as input, converting it into a base64 string, preparing a payload containing the base64 string, and sending a post request to the backend. I then need to retrieve the response data and preview the base64 image from the response object.
However, when I run the code, I encounter the following error inside the axios request:
Error: "setting getter-only property "result""
It's worth noting that console.log(response) successfully prints the response data. But unfortunately, console.log('SUCCESSFUL') does not print due to the error.
<template>
<div id="Uploader">
<input type="file" id="file" ref="file" v-on:change="handleFileChanges" multiple/>
<button v-on:click="upload_picture">Submit</button>
<div> Hello {{result}}</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'Uploader',
data() {
return {
file: '',
values: '',
result: [],
};
},
methods: {
handleFileUpload() {
[this.file] = this.$refs.file.files;
},
handleFileChanges(e) {
const reader = new window.FileReader(); // if window i
// s not used it says File READER is not defined
reader.onload = function oldyfunt(event) {
// dispatch fileAttached to state UI postEditor with event.target.result as read dataURL
this.values = event.target.result;
console.log('VALUES');
console.log(this.values);
const data = {
images: {
image1: this.values.split(',')[1],
},
};
axios.post('http://0.0.0.0:9094/analyze',
data,
{
headers: {
'Content-Type': 'application/json',
},
}).then((response) => {
console.log(response);
this.result = response.data;
console.log('SUCCESS!!');
}).catch((error) => {
console.log(error);
console.log('FAILURE!!');
});
};
reader.readAsDataURL(e.target.files[0]);
},
upload_picture() {
console.log(this.values);
},
},
};
</script>