在Laravel和Vue中使用Axios上载文件和输入数据 [英] Uploading file and input data using axios in laravel and vue

问题描述

我一直在尝试使用带有laravel后端的vue js中的axios上传带有表单数据的文件.那里的解决方案很少，但是我无法使它们起作用.

I have been trying to upload a file with form data using axios in vue js with laravel backend. There are few solutions out there but I am not being able to make them work.

这就是我要尝试做的. 这是我在vue js中的数据，我将它们与v-model绑定.我的表单提交方法及其代码

So here what I am trying to do. Here is my data in vue js and I am binding them with v-model.My form submission method and it's code

let formData = new FormData();
var file = document.querySelector('#report');
formData.append("file", file.files[0]);
formData.append('someName','someValue');

axios({
         method: 'put',
         url: self.sl+'/seller/upflv',
         data: formData,
   })

在laravel后端中，我使用

In laravel backend I am loggin using

 \Log::info($request->all());

然后我的日志文件中得到一个空数组.

And I get an empty array in my log file.

这是我在Chrome网络中可以看到的内容

Here is what I can see in my chrome network

------WebKitFormBoundary0Q7B39baNw6AJXDA
Content-Disposition: form-data; name="file"; filename="d.PNG"
Content-Type: image/png
------WebKitFormBoundary0Q7B39baNw6AJXDA
someValue
------WebKitFormBoundary0Q7B39baNw6AJXDA--

任何帮助或解释都将非常有帮助. 谢谢你.

Any help or explanation would be extremely helpful. Thank you.

推荐答案

前一段时间遇到了类似的问题.

Ran into a problem like that some time ago.

检查此 https://github.com/laravel/framework/issues /13457#issuecomment-239451567

尝试这样发送:

let formData = new FormData();
var file = document.querySelector('#report');
formData.append("file", file.files[0]);
formData.append('someName','someValue');
formData.append('_method', 'PUT'); // ADD THIS LINE
axios({
         method: 'post', //CHANGE TO POST
         url: self.sl+'/seller/upflv',
         data: formData,
   })

这篇关于在Laravel和Vue中使用Axios上载文件和输入数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！