How should i format my JSON in Vue using Axios to look like this?

Question

I've spent hours trying to figure out how to format my JSON in Vue.js to send it this way:

At the moment I'm trying to do it with a FormData() object, but the result is still just:

My function looks like this:

register () {
        var bodyFormData = new FormData();
        bodyFormData.append('firstname', 'Coca');
        bodyFormData.append('lastname', 'Cola')
        console.log(jsonData)
        axios({
          method: 'post',
          url: 'backend/index.php?action=createUser',
          data: bodyFormData,
          headers: {'Content-Type': 'multipart/form-data' }
          })
          .then(function (response) {
              //handle success
              console.log(response);
          })
          .catch(function (response) {
              //handle error
              console.log(response);
          });
      }

I've achieved the result on the first picture through jQuery AJAX calls, is this also possible with Axios in Vue?

Answer 1

您可以使用JSON.stringify方法并将您的对象附加到表单数据中。

bodyFormData.append('data', JSON.stringify(jsonData));

Answer 2

You are explicitly using Content-Type: multipart/form-data and sending form data for your data parameter. To send JSON, set data to the object you want to serialize as JSON, and use application/json as your content-type .

async register () {
  try {
    const response = await axios({
      method: 'post',
      url: 'backend/index.php?action=createUser',
      data: { firstname: 'Coca', lastname: 'Cola' },
      headers: {'Content-Type': 'application/json' }
    });
    //handle success
    console.log(response);
  } catch (err) {
    //handle error
    console.log(err);
  }
}

Answer 3

感谢您的回答，我实际上必须制作一个 FormData 并用字符串化的 JSON 数据填充它。