I have a method for Vuejs component:
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) } } }
And in test.php
, I’m using json_decode(file_get_contents("php://input"), TRUE);
to read data as $_POST
variables.
While I am able to read name
, gender
and dob
correctly, I can’t fetch avatar
properly.
Any solutions for the same?
Note: I don’t to append every variable as formData.append(.., ..)
as I am planning to handle over 14 variables.
Note for moderators: I didn’t find any question where formData was being used along with other data objects.
Advertisement
Answer
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.