POST文件以及表单数据Vue + axios [英] POST file along with form data Vue + axios
问题描述
我有一个Vuejs组件的方法:
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)
}
}
}
在test.php
中,我正在使用json_decode(file_get_contents("php://input"), TRUE);
读取数据作为$_POST
变量.
And in test.php
, I'm using json_decode(file_get_contents("php://input"), TRUE);
to read data as $_POST
variables.
虽然我可以正确读取name
,gender
和dob
,但是我却无法正确获取avatar
.
While I am able to read name
, gender
and dob
correctly, I can't fetch avatar
properly.
有相同的解决方案吗?
注意:由于我打算处理14个以上的变量,因此我不会将每个变量都添加为formData.append(.., ..)
.
Note: I don't to append every variable as formData.append(.., ..)
as I am planning to handle over 14 variables.
主持人的注意事项:我没有发现任何将formData与其他数据对象一起使用的问题.
Note for moderators: I didn't find any question where formData was being used along with other data objects.
推荐答案
因此,我以一种更简单的方式解决了这个问题:
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);
注意:我可以选择使用:
Object.keys(rawData).map(e => {
formData.append(e, rawData[e])
})
但是由于我正在处理rawData中的嵌套对象(name: { first: '', last: ''} )
,所以我选择不这样做,因为这将需要在客户端或服务器端使用递归方法.
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.
这篇关于POST文件以及表单数据Vue + axios的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!