Vuejsコンポーネントのメソッドがあります。
_async submit () {
if (this.$refs.form.validate()) {
let formData = new FormData()
formData.append('userImage', this.avatarFile, this.avatarFile.name)
this.avatarFile = formData
try {
let response = await this.$axios.post('http://localhost:3003/api/test.php', {
avatar: this.avatarFile,
name: this.name,
gender: this.gender,
dob: this.DOB,
}, {
headers: {
'Content-Type': 'multipart/form-data; boundary=' + formData._boundary
}
})
if (response.status === 200 && response.data.status === 'success') {
console.log(this.response)
}
} catch (e) {
console.log(e)
}
}
}
_
そして、_test.php
_では、json_decode(file_get_contents("php://input"), TRUE);
を使用して、データを_$_POST
_変数として読み取ります。
name
、gender
、dob
を正しく読み取ることはできますが、avatar
を正しくフェッチできません。
同じための解決策はありますか?
注:14を超える変数を処理する予定なので、すべての変数をformData.append(.., ..)
として追加する必要はありません。
モデレーターへのメモ:formDataが他のデータオブジェクトと共に使用されている場所については、質問は見つかりませんでした。
だから、私はこれをもっと簡単な方法で理解しました:
let rawData = {
name: this.name,
gender: this.gender,
dob: this.dob
}
rawData = JSON.stringify(rawData)
let formData = new FormData()
formData.append('avatar', this.avatarFile, this.avatarFile.name)
formData.append('data', rawData)
try {
let response = await this.$axios.post('http://localhost:3003/api/test.php', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
test.php:
$_POST = json_decode($_POST['data'],true);
注:使用するオプションがありました:
Object.keys(rawData).map(e => {
formData.append(e, rawData[e])
})
ネストされたオブジェクトを扱っていたので(name: { first: '', last: ''} )
rawDataでは、クライアント側またはサーバー側のいずれかで再帰的なメソッドが必要になるため、これを行わないことを選択しました。
[〜#〜] php [〜#〜](process.php)
<?php
$data = array(
"post" => $_POST,
"files" => $_FILES
);
echo json_encode($data);
?>
Vue and form HTML
let vm = new Vue({
el: "#myApp",
data: {
form: {}
},
methods: {
submit: async function (e) {
e.preventDefault();
/* formData */
var formData = new FormData( this.$refs.formHTML );
/* AJAX request */
await axios({
method: "post",
url: "process.php",
data: formData,
config: { headers: { "Content-Type": "multipart/form-data" } }
})
/* handle success */
.then( response => { console.log(response.data); } )
/* handle error */
.catch( response => { console.log(response) } );
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>
<div id="myApp" >
<form @submit="submit" ref="formHTML" >
Name: <input type="text" name="name" v-model="form.name" /><br />
Gender:
<input type="radio" name="gender" value="male" v-model="form.gender" /> Male
<input type="radio" name="gender" value="female" v-model="form.gender" /> Female <br />
File: <input type="file" name="upload" v-model="form.upload" /><hr />
<input type="submit" name="submit" value="Submit" />
</form>
</div>