无法使用 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； Do 只需使用 $_POST 和 $_FILES

中的值

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

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

Unable to send strings with Axios using FormData using Vue.js

javascript

php

form-data

vue.js

axios