Why this Vue code doesn’t work for me? is this due to wrong value assignment to data?

JavaScript
1

Hello,

Why this code doesn’t work for me?
is this due to wrong value assignment to data?

  <template>
    <h1>Uploading an Image!</h1>

    <div>
        <form>
           
            <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 {

                selectedFile: null,

                uploadResult: null

            }

        },

        methods: {

            getFile(event) {

                this.selectedFile = event.target.files[0];

                console.log(this.file);

            },

            submitForm(event) {

                event.preventDefault();

                let formData = new FormData();

                formData.append("ImageData", this.selectedFile, this.selectedFile.name);
      

                fetch('/api/Image', {

                    method: 'POST',

                    body: formData

                }).then(resposne => resposne.json())

                    .then(data => {

                        console.log(data);

                        this.uploadResult=  "File " + this.fileName + " successfully uploaded."


                    });


            }

        }

    };

</script>

thanks,

Saeed

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.