POST file along with form data Vue + axios
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>So, I figured this one out in a simpler way:
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);
Note: I had an option of using:
Object.keys(rawData).map(e => {
formData.append(e, rawData[e])
})
but since I was dealing with nested objects (name: { first: '', last: ''} ) in rawData, I chose not to do that as it would require recursive methods on either client side or server side.