POST-файл вместе с данными формы Vue + axios
У меня есть метод для компонента 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 должным образом.
Любые решения для того же?
Примечание: я не добавляю каждую переменную как formData.append(.., ..) так как я планирую обработать более 14 переменных.
Примечание для модераторов: я не нашел вопроса, где 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 я решил не делать этого, так как для этого потребуются рекурсивные методы на стороне клиента или на стороне сервера.
Другие решения
Других решений пока нет …