我正在嘗試使用 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 代碼中的前 2 行。它們存在的原因是在同一個 PHP 檔案中，我還通過資料系結處理其他簡單的 Axios POSTS 請求，這些請求都可以正常作業。盡管我相信它們不會引起任何與此相關的問題，但我還是將它們包括在內，以防萬一。
In the PHP file $id is defined properly, $file is defined properly however $title never is no matter what I do. After hours of intense troubleshooting, I've found that strings never make it past the Axios request, ever. If I change :
formData.append('title', this.galleryMeta[i].Title);
to
formData.append('title', '20');
It is immediately sent properly. The problem is not in the galleryMeta array of objects if I set the Title in galleryMeta to a random number everything works. All the variables that I'm using in the JavaScript code are properly defined. I tried to console.log() every single bit of that code, and all the variables contain their respective proper expected values, always. But strings never get parsed by Axios AJAX at all. It doesn't matter how long the string is or what does it contain, it just won't get past the request. I've also checked the values of that formData form with this loop :
for (var value of formData.values()) {
console.log(value);
}
他們都在那里，正確分配，就像我想要的那樣。所以我的問題很明顯。我到底如何在 Vue.js 中使用 FormData 和 Axios 決議字串？我做錯了什么讓這一切發生？上帝，感謝任何能指出這個問題的人。謝謝！
uj5u.com熱心網友回復：
$id = json_decode($_POST['id']);
如果它是整數，它就可以作業，因為整數是有效的 JSON。
如果您發送的字串是null, false, "foo"（是的，帶引號）或任何其他有效的 JSON，它也可以作業。
您正在發送一個 FormData 物件，該物件序列化為 multipart/form-data 請求正文。這不是 JSON
不要嘗試將其作為 JSON 處理。
不要使用file_get_contents("php://input"); 待辦事項使用$_POST和$_FILES
不要使用json_decode; 不要只使用值從$_POST和$_FILES
旁白：不要指定，'Content-Type': 'multipart/form-data'因為這缺少必需boundary引數。瀏覽器Content-Type在接收到 FormData 物件時會自動添加正確的標題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/394705.html
標籤：javascript php Vue.js 公理 表单数据