Hello,
I have written this component to upload files. I want when it tries to upload a file shows the: uploading, and at the end, shows the result. It uploads well but doesn’t show the result.
Where is wrong?
<template>
<h1>Uploading an Image!</h1>
<p>This component demonstrates Uploading Image to server.</p>
<p v-if="!uploadResult"><em>uoloading...</em></p>
<div v-if="uploadResult">{{this.uploadResult}} </div>
<div>
<form>
<!--<input type="text" value="" v-model="projectName" placeholder="please enter the project name." />-->
<input type="file" v-on:change="getFile($event)" />
<button v-on:click="submitForm($event)">Upload</button>
</form>
</div>
</template>
<script>
export default {
name: "Upload1",
data() {
return {
//projectName: "",
selectedFile: " ",
uploadResult: " ",
fileList: []
}
},
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);
fetch('/api/Image', {
method: 'POST',
body: formData
}).then(resposne => resposne.json())
.then(data => {
console.log(data);
this.uploadResult= "File " + data.fileName + " successfully uploaded."
this.getList();
});
},
getList() {
fetch('api/Image')
.then(response => response.json())
.then(data => this.fileList = data)
}
},
mounted() {
this.getList();
}
};
</script>
please inform.
regards,
Saeed