I am writing an application with vuejs as frontend and laravel 8 as backend
I want to allow user select a picture from their local computer and send it to the backend.
I want to convert it to json first befor sending it to the server
but when I convert it to json the json object becomes empty
template
<input type="file" @change="uploadFile( $event, index, idx )" name="" id="">
Vuejs
export default {
name: 'CreateCourse',
setup(){
const file = reactive({"file" :''})
const uploadFile = (e, idx, i) => {
file.file = e.target.files[0];
console.log("no json", file.file);
console.log("Object file is ",JSON.parse(JSON.stringify(file.file)));
}
const formData = new FormData();
formData.append("file", file);
axios.post('http://127.0.0.1:8000/api/v1/courses', formData, {
headers: {
'accept': 'application/json',
'Accept-Language': 'en-US,en;q=0.8',
'Content-Type': 'multipart/form-data'
}
}).then(response => {
}).catch(err => {
NotificationService.error(err.response);
showLoader(false);
});
return {
uploadFile
}
}
}
The console.log with no json show the uploaded file but the console.log with object file shows empty json object. How do I go about this?