Как отправить объект FormData в виде пары ключ-значение в Vue js?

#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. Я добавил пример, как это просто сделать.