#javascript #forms #vue.js #javascript-objects #multipartform-data
#javascript #формы #vue.js #javascript-объекты #составная форма-данные
Вопрос:
Я пытаюсь загрузить изображение с помощью vue и laravel на серверной части. Все шло хорошо, пока я не столкнулся с проблемой. Мое изображение отправляется, когда я выполняю вызов axios, отправляющий FormData только в качестве аргумента.
let formData = new FormData();
formData.append("image", this.image);
axios.post('url',formData)
Но по запросу axios я хочу отправить объект, а не только FormData, что-то вроде этого:
const myObj={ name:'hello','shop_id':2, image:formData }
axios.post('url',myObj)
Но это не работает. Есть ли какой-либо способ, которым я могу обойти это?
Ответ №1:
Добавьте name
и shop_id
значения к FormData
объекту. В данном случае FormData
это контейнер, в который вы можете отправить все свои данные.
let formData = new FormData();
formData.append('image', this.image);
formData.append('name', 'hello');
formData.append('shop_id', 2);
axios.post('url',formData)
Если ваши данные становятся более сложными, и вам нужно отправить большой объект с большим количеством данных, тогда вы можете отправить объект в виде значения JSON в одном из ключей.
const complexObject = {
...loads of data here
};
formData.append('complexObject', JSON.stringify(complexObject))
Проанализируйте JSON обратно в полезный код на стороне сервера, чтобы использовать данные внутри сложного объекта.
Комментарии:
1. Спасибо. Я чувствую себя настолько глупо, что не подумал об этом. Вы спасаете жизнь 🙂
2. Я добавил пример, как это просто сделать.