Vue axios 请求数据时 php 无法接收到数据，解决

Vue axios 请求数据时 php 无法接收到数据，解决

一、实例，无法接收到数据

如图，我以 post 的方式发送一个请求到 php 后台，请求中是有数据的，但后台没有接收到数据。

二、解决办法

这是因为 axios 发送数据时不是以 formData 的形式发送的，而 php 接收的是以 formData 形式的数据。
所以我们只需要把数据在请求之前转换一下就好。

这里我们用到一个工具 qs 只需要 qs.stringfy(data) 即可。
你可以在每次请求时都手动 stringfy 一次，但是这样麻烦。

我们可以直接在 axios 的默认设置中进行这个操作：
axios 可以设置默认配置，可以设置每次请求之前对数据进行处理，字段是 axios.defaults.transformRequest 接收的是数组。

官方说明：https://github.com/axios/axios

在 package.json 不添加 qs 工具，这个就不细说了。

在 main.js 中添加如下内容：

// Network request

import qs from 'qs'
import axios from 'axios'

// 设置 axios，把请求数据在这里转换一下，参考官方文档： https://github.com/axios/axios
axios.defaults.transformRequest = [(data, header) => {
  return qs.stringify(data);
}]

// 可以设置全局变量，这样就可以全局通过 this.$axios 使用 axios 了
Vue.prototype.$axios = axios

或者 你也可以自己封装一个方法，在里面自己用 qs 转换一下：

function postData(url, queryData) {
   return new Promise(function (resolve, reject) {
      axios.post(url, qs.stringify(queryData))
         .then(res => {
            if (res.data.success) {
               resolve(res.data)
            } else {
               popMessage(POP_MSG_TYPE.danger, res.data.info )
            }
         }).catch(() => {
         reject()
      })
   })
}

三、结果

这样处理之后，后台 php 就能正常接收到数据了。

本文参考博文：Vue使用axios POST提交数据PHP却无法接收到参数？