Welcome to my first question on this platform!
I am looking for a way to convert an input file (image) from a form using VueJs 3 and typescript to Base64 in order to "send" it to my backend (java, spring boot) and store it in mongodb as part of a "User" model.
Here is the current issue I am facing:
The line e.target.files[0] keeps showing as possibly null, causing const selectedImage and this.picture not to be retrieved.
<template>
<v-file-input
@change="handleImage"
type="file"
accept="image/*"
label="File input"
v-model="picture"
filled
prepend-icon="mdi-camera"
></v-file-input>
</template>
<script lang="ts">
interface State {
picture: string;
}
data: (): State => {
return {
picture: "",
}
}
methods: {
handleImage(e: Event) {
const selectedImage = e.target.files[0];
this.createBase64Image(selectedImage);
},
createBase64Image(fileObject: File) {
const reader = new FileReader();
reader.onload = (e) => {
this.picture = e.target.result;
};
reader.readAsBinaryString(fileObject);
},
},
</script>
Your help with this matter will be greatly appreciated. Thank you in advance!