Как установить данные формы для логического значения в запросе Axios post

#api #vue.js #axios

Вопрос:

Я пытаюсь отправить запрос post с помощью axios на свой сервер, но по какой-то причине не могу отправить логическое значение «isActive». Есть ли способ сделать это?

 async submit() {
    const isValid = await this.$validator.validateAll()
    if (isValid amp;amp; !this.submitting) {
        let formData = new FormData();
        formData.set("city", this.formData.city)
        formData.set("state", this.formData.state)
        formData.set("county", this.formData.county)
        formData.set("isActive", true) // <- NOT ACCEPTING THIS VALUE

        axios.post("/api/v1/team/createTeam", formData, {
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then(res => {
                if (res.status === 200) {
                    this.submitting = true
                    this.cancelModal()
                } else {
                    console.log(res.data.code);
                }
            })
            .catch(function (err) {
                console.log(err);
            })
        }
}
 

Ответ №1:

FormData может содержать только строковые значения. Установка логического true значения приведет "true" к значению. Серверная часть должна была бы преобразовать эту строку в логическое значение.

Кроме того, ваш заголовок не должен быть application/json (предназначен для полезных нагрузок JSON). При отправке FormData в качестве полезной нагрузки заголовок должен быть multipart/form-data :

 axios.post("/api/v1/team/createTeam", formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
 

Если ваш сервер действительно ожидает JSON, вы не сможете отправить FormData . Вместо этого переключитесь на объект JavaScript (который принимает логические значения).:

 const payload = {
  city: this.formData.city,
  state: this.formData.state,
  county: this.formData.county,
  isActive: true,
}

axios.post("/api/v1/team/createTeam", payload, {
  headers: {
    'Content-Type': 'application/json'
  }
})