Laravel 和 Vue.js 使用 Axios 通过 Put 请求上传文件 获取不到 Request 数据，通过 post 传递 form 表单添加隐藏方法 _method='put' 解决（踩坑记录）

说明：上传 Excel 文件做了两天了，卡在了获取上传文件数据这里，采用了 Vue.js 作为前端技术栈，通过 Axios 进行接口数据请求，所以查到 Axios 官方提供了上传文件示例

问题出现

通过官方 put 方式提交数据，获取不到 Request 信息，直接 Log 中打印出来是空数组（后悔当初没使用 post）

下面为犯错步骤还原：

在 Vue 组件中采用 Axios 官方是上传文件示例

在 Vue 组件中采用 Axios 官方是上传文件示例.png

Laravel路由方式采用 put

Laravel路由方式采用 put.png

使用 chrome Dev Tools 查看 put 请求

使用 chrome Dev Tools 查看 put 请求.png

控制上传方法，这里主要想在 laravel 日志中打印上传的数据，判断服务器是否成功获取上传数据

判断服务器是否成功获取上传数据.png

Log 中并没有数据

Log 中并没有数据.png

中间就是漫长的 2B 试错之旅了

我开始想的问题是：

1.是不是 new formData()这个对象出了问题，然后去查 官方文档，最后发现这是 H5.js 中的也就是 javascript 原生的对象，不应该出问题。。。

2.之后又联想到只传递普通键值对 formdata 试试，发现仍然不能获取到数据:
只上传键值对

只上传键值对.png

Log 依然没有数据

Log 依然没有数据.png

3.没办法了，换成 post 上传试试，结果发现有数据了。。。
修改为post 路由

修改为post 路由.png

Controller 方法修改显示请求方式

Controller 方法修改显示请求方式.png

Log 有数据

Log 有数据.png

至此，试错完毕

---

问题解决，想想就知道可能是 put 方法并没有被 laravel 正确解读，官方文档中也有 form-method-spoofing 说明，按部就班：

web.php 路由

web.php 路由.png

Controller 方法

Controller 方法.png

Vue 组件 Axios

Vue 组件 Axios.png

Log 有数据

Log 有数据.png

至此，数据获取成功。

总结

归根结底是我没有想到 axios其实也是 ajax 提交，需要 _method 隐藏方法提交，最关键的是我被 laravel 日志误导了，当我使用 put 方法直接提交的时候是可以出发控制器方法的（也就是可以打印出空数组），所以我会当成其实请求发送成功并且成功提交的控制器方法中。。。。。。。。。。。。