Hello,
Why Axios in this code doesn’t send any data to the back-end in Vue?
Do you see anything wrong?
<template>
<h1>Uploading an Image!</h1>
<p>This component demonstrates Uploading Image to server.</p>
<div>
<form>
<input type="file" v-on:change="getFile($event)" />
<button v-on:click="submitForm($event)">Upload</button>
</form>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: "Upload1",
data() {
return {
selectedFile: " ",
uploadResult: " "
}
},
methods: {
getFile(event) {
this.selectedFile = event.target.files[0];
console.log(this.file);
},
submitForm(event) {
event.preventDefault();
let formData = new FormData();
formData.append("ImageData.File", this.selectedFile);
let config = {
headers: {
"Content-Type": "multipart/form-data"
}
};
axios.post('/api/Image', {
formData,
config
}).then(resposne => resposne.json())
.then(data => {
console.log(data);
this.uploadResult = "File " + data.fileName + " successfully uploaded."
});
}
}
};
</script>
regards,
Saeed