Есть альтернатива для отправки через FormData?

Question

[Nightmare058]

Доброго времени суток, уважаемые.
Суть вопроса: мне нужно отправить данные формы + изображение через axios.
Гугл подсказал вариант с FormData, где создается пустой объект и к нему через append крепятся значения полей.
Из-за этого у меня получается довольно громоздкий код.
Может есть какие-то еще способы, чтобы не делать appen на каждое поле?

Comments

[WapSter]

Да использовать цикл как все, или засунуть в FormData всю форму

Answer 1

[Вадим]

Только желательно чтобы у Вас форма была сделана по правилам. Элементы имели все необходимые атрибуты, такие как name и value.
const data = new FormData(formElement)

Альтернативный вариант - иметь на каждое поле формы или на всю форму объект в свойстве vue - data(){}
А при изменении значений в инпутах обновлять данные в этом объекте. А при сабмите отправлять этот объект в формате json, например. Только картинку нужно будет преобразовывать, скажем, в base64 или в то, что сможет обработать Ваш бэкенд.

Comments

[Nightmare058]

То есть я могу сначала создать объект let fd = FormData(formElement), который будет содержать данные формы. А потом через fd.append ('image', this.image)?

[Вадим]

Nightmare058, можно так. А если картинку добавлять через input type file, то можно без append обойтись. Картинка в бинарном формате отправится на бэк в formdata