无法使用 Vue.js 使用 FormData 使用 Axios 发送字符串

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

但是，如果“文本”是一个整数，那只会出于某种荒谬的原因。这是我用于表单的 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 AJAX 请求的 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 代码中的前两行。它们存在的原因是在同一个 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 中使用 FormData 和 Axios 解析字符串？我做错了什么让这件事发生？上帝，感谢任何能指出这个问题的人。谢谢！

Answer 1

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

如果它是整数，它就可以工作，因为整数是有效的 JSON。

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

您正在发送一个序列化为 multipart/form-data 请求正文的 FormData 对象。 这不是 JSON

不要尝试将其作为 JSON 处理。

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

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

---

除此之外：不要指定'Content-Type': 'multipart/form-data'，因为这缺少必需的boundary 参数。浏览器在接收到FormData对象时会自动添加正确的Content-Type标头。