無法使用 Axios 使用 FormData 使用 Vue.js 發送字符串

Question

我正在嘗試使用 Vue.js 中的 Axios 和 FormData 在單個請求中發送文件輸入和文本輸入。 我讀過這很簡單，只需執行以下操作：

const formData = new FormData();
formData.append('file', file);
formData.append('text', text);
axios.post('ajax.php', formData)
.then(function (response){
    console.log(response.data);
})

但這僅在“文本”是 integer 時出於某些荒謬的原因才有效。 這是我用於表單的 HTML 代碼：

<div v-for="(gallery, i) in galleryMeta">
    <form @submit.prevent="editData('gallery', gallery.Id, i)">
        <div class="row no-gutters">
            <div class="col-xl-6 col-md-5 col-sm-4 col-12 pb-sm-0 pt-sm-0 d-flex align-items-center justify-content-md-start justify-content-sm-center">
                <div class="d-flex flex-column py-3 pl-sm-0 pl-4">
                    <h6 class="font-normal text-brand-primary pb-1 pl-md-0 pl-sm-4">Title:</h6>
                    <div class="d-flex justify-content-md-start justify-content-sm-center">
                        <input type="text" class="border-radius d-md-flex d-sm-none" v-model="gallery.Title">
                        <input type="text" class="border-radius w-75 d-md-none d-sm-flex d-none" v-model="gallery.Title">
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-3 col-12 pb-sm-0 d-flex align-items-center justify-content-sm-end justify-content-center">
                <div class="d-flex flex-sm-column pr-lg-0 pr-sm-3">
                    <label class="btn btn-brand-primary font-bold py-2 my-sm-0 my-2" for="file">EDIT</label>
                    <input type="file" id="file" ref="file" style="display: none;" accept="image/jpeg,image/png,image/webp" @change="pickData">
                    <button class="btn btn-brand-secondary font-bold px-lg-5 px-3 py-2 my-2 mx-sm-0 mx-2" @click="editData('gallery', gallery.Id, i)">UPLOAD</button>
                </div>
            </div>
        </div>
    </form>
</div>

該表格適用於其他所有內容。 這是 Vue.js 代碼：

let app = Vue.createApp({
    data: function(){
        return{
            File: '',
        }
    },
    methods:{
        pickData: function (){
            this.File = event.target.files[0];
        },
        editData: function (requestSection, Id, i, Title){
            if(requestSection === 'gallery'){
                const formData = new FormData();
                formData.append('file', this.File);
                formData.append('id', Id);
                formData.append('title', this.galleryMeta[i].Title);
                axios.post('ajax.php', formData, {
                    header: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                .then(function (response){
                    console.log(response.data);
            }
        }
    }
})

這是處理 Axios ZA34A6659BCEAE779F28185E757 請求的 ajax.php 文件：

<?php
$data = json_decode(file_get_contents("php://input"));
$request = $data->request;

if(isset($_FILES['file']['name'])){
    $id = json_decode($_POST['id']);
    $title = json_decode($_POST['title']);
    $file = file_get_contents($_FILES['file']['tmp_name']);
}
?>

您可能已經注意到 PHP 代碼中的前 2 行。 它們存在的原因是在同一個 PHP 文件中，我還通過數據綁定處理其他簡單的 Axios POSTS 請求，這些請求都可以正常工作。 盡管我相信它們不會引起與此相關的任何問題，但我將它們包括在內以防萬一。

在 PHP 文件中$id定義正確， $file定義正確但是$title無論我做什么都不會。 經過數小時的密集故障排除后，我發現字符串永遠不會超過 Axios 請求。 如果我改變：

formData.append('title', this.galleryMeta[i].Title);

至

formData.append('title', '20');

它會立即正確發送。 如果我將galleryMeta中的Title設置為隨機數，則問題不在galleryMeta對象數組中，一切正常。 我在 JavaScript 代碼中使用的所有變量都已正確定義。 我試圖 console.log() 該代碼的每一位，並且所有變量始終包含它們各自正確的預期值。 但是字符串永遠不會被 Axios AJAX 解析。 不管字符串有多長或它包含什么，它都不會超過請求。 我還用這個循環檢查了formData表單的值：

for (var value of formData.values()) {
   console.log(value); 
}

他們都在那里，正確分配，就像我想要的那樣。 所以我的問題很明顯。 我到底如何在 Vue.js 中使用帶有 Axios 的 FormData 解析字符串？ 我做錯了什么讓這件事發生？ 上帝，感謝任何能指出這個問題的人。 謝謝！

Answer 1

$id = json_decode($_POST['id']);

如果它是 integer，它就可以工作，因為 integer 是有效的 JSON。

如果您發送的字符串是null 、 false 、 "foo" （是的，帶引號）或任何其他有效的 JSON，它也可以工作。

您正在發送一個 FormData object ，它序列化為一個 multipart/form-data 請求正文。 這不是 JSON

不要嘗試將其處理為 JSON。

不要使用file_get_contents("php://input") ； 一定要使用$_POST和$_FILES

不要使用json_decode ； 只使用來自$_POST和$_FILES的值

---

另外：不要指定'Content-Type': 'multipart/form-data'因為這缺少強制boundary參數。 瀏覽器在收到FormData object時會自動添加正確的Content-Type header。