如何使用 AXIOS 将 JSON 个对象的数组从 Vue.js 发送到 Laravel

Question

因此，我的 Laravel API 端点希望收到类似这样的信息以成功将其添加到数据库：

{
  ICAO: 'ABC',
  name: 'The name of Airport',
  place: 'city',
  country: 'country'
}

我做了一个解析器，它接受 .csv 文件并解析它，我想用 axios 发送这样的东西：

[
  {
    ICAO: 'ABC',
    name: 'The name of Airport',
    place: 'city',
    country: 'country'
  },
  {
    ICAO: 'DEF',
    name: 'The name of Airport',
    place: 'city',
    country: 'country'
  },
  {
    ICAO: 'GHI',
    name: 'The name of Airport',
    place: 'city',
    country: 'country'
  },
  {
    ICAO: 'JKL',
    name: 'The name of Airport',
    place: 'city',
    country: 'country'
  }
]

所以我可以用 foreach 迭代这个数组，从而将其中的所有对象添加到 db。

  public function import(Request $request)
  {
    // Do validation
    $airports = $request->all();
    foreach ($airports as $airport) {
      Airport::create($airport)
    };

    return response('Airports imported', 200);
  }

我什至尝试发送一个带有属性 'data' 的对象，它具有上述 JSON 对象数组的值，然后尝试迭代该属性。

在邮递员中一切正常，但是当尝试用应用程序发送时，它不起作用或者用空行填充数据库。

我也使用 vuex store 所以我发布这个的操作是：

 importAirports (payload) {
  if (auth.roles('Operative')) {
    axios.post(api + '/airports/import?token=' + token, payload, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
    .then(function (response) {
      console.log(response)
    })
    .catch(function (error) {
      commit('error', error)
      console.log(error)
    })
  }
}

一个机场的基本创建工作正常，其他一切都很好，但这个不行。有什么想法吗？

Answer 1

我认为您的问题可能出在 Vuex 操作中。据我所知，Vuex 操作的第一个参数是 'context' 后跟第二个参数，即有效负载。您的操作参数应如下所示：

importAirports (context, payload) {
// do stuff
}

然后您可以使用解构来访问像 commit 这样的方法，我看到您在 .catch() 块中使用了这些方法。像这样：

 importAirports ({ commit }, payload) {
  if (auth.roles('Operative')) {
    axios.post(api + '/airports/import?token=' + token, payload, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
    .then(function (response) {
      console.log(response)
    })
    .catch(function (error) {
      commit('error', error)
      console.log(error)
    })
  }
}

Answer 2

您正在 Post 请求中发送 Get 方法。那样 Laravel 让你变得空虚 $request.

这样试试。

axios.post('your_route', {data: 'json_data_here"}, callback)

如何使用 AXIOS 将 JSON 个对象的数组从 Vue.js 发送到 Laravel

How to send an array of JSON objects to Laravel from Vue.js with AXIOS

arrays

json

laravel

vue.js

axios