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 的數組元素。