I'm trying to upload images with Vue Js, but it didn't work. If you examine the codes below, you will see that I cannot transfer the file correctly. I couldn't find where the problem originated.

I am requesting your support.

// HTML code
// There is a problem in the image or file upload area to the card.
<input type="file" v-model="cardContent.cardContentImgPath" @change="onFileChange">

// Vuejs code
onFileChange(e) {
        var files = e.target.files || e.dataTransfer.files;
        console.log(e.target.files);
        if (!files.length)
            return;
        this.addToCardContent(files[0]);
      },

      addToCardContent: function(file){
        
        let formData = app.toFormData(app.cardContent, file);

        
        axios.post('https://example.com/note/api_card.php?action=addContent',formData, {
            header:{
                'Content-Type' : 'multipart/form-data'
            }})
        .then(function(response){
            if(!response.data.error){

                app.getListCardContent();
                console.log(app.cardContent.cardContentImgPath);
                app.cardContent     = {cardContentText : '', cardContentImgPath : ''};

            }
        });



      }