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
方法直接提交的时候是可以出发控制器方法的(也就是可以打印出空数组),所以我会当成其实请求发送成功并且成功提交的控制器方法中。。。。。。。。。。。。