VueJS - 如何发送 JSON 数组的 POST 请求，每个数组除了每个数组元素的文件或图片之外还包括数据

Question

I'm trying to send through Axios to PHP formData from a dynamic Form where a user can add as many "persons" as he wants. Each person has data + a picture.

Here's the data format

data: {
    person:{
        personname: '',
        securitynumber: '',
        dob: '',
        picture: '',
    },
    persons: [],
},

Everything works without the picture, I'm able to upload images by creating a FormData, but how is it possible to change the whole data array (persons) to JSON with each element having its own picture file.

On submit i'm appending to the formData

 var formData = new FormData();

        Object.keys(this.persons).forEach(key => {
            formData.append(key, JSON.stringify(this.persons[key]));
        });

However, i'm having trouble adding a file(picture) specifically to each person item in the array. (fetching it from the form input with ref and having it be part of the form data JSON).

Thank you for any input.

Answer 1

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.