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

Question

我正在尝试通过 Axios 将动态表单中的 PHP formData 发送到用户可以根据需要添加任意数量的“人员”。 每个人都有数据+一张图片。

这是数据格式

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

没有图片一切正常，我可以通过创建 FormData 上传图像，但是如何将整个数据数组（人）更改为 JSON，每个元素都有自己的图片文件。

在提交时，我将附加到 formData

 var formData = new FormData();

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

但是，我无法专门为数组中的每个人项添加文件（图片）。 （使用 ref 从表单输入中获取它，并将其作为表单数据 JSON 的一部分）。

感谢您的任何意见。

Answer 1

我能够通过放弃 ref 想法并使用 onChange 来使其工作，该 onChange 采用以下元素：

在表单循环中：

<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);
    },

这样，对于每个表单元素（vue 数组元素），我都可以分配一个图像。 结果是一个 formData，其中包含所有易于发布到 PHP 的数组元素。