[Vuejs]-VueJS – How to send a POST request of a JSON array each including data in addition to a File or Picture for each array element

by

0👍

I was able to make it work by ditching the ref idea and working with an onChange that takes the elements as such:

In the form loop : 

<input class="form-control-file" :id="'file-'+index" type="file" accept="image/*"
                                               @change="onFileChange(person, $event)">

Vues function:

onFileChange(item, e) {
        var files = e.target.files || e.dataTransfer.files;
        if (!files.length)
            return;
        this.createImage(item, files[0]);
    },
    createImage(item, file) {
        var image = new Image();
        var reader = new FileReader();

        reader.onload = (e) => {
            item.image = e.target.result;
        };
        reader.readAsDataURL(file);
    },

That way, for every form element (vue array element), i’m able to assign an image.
The result is a formData that includes all the array elements easily posted to PHP.

Leave a comment