我试图通过AJAX在Laravel 5.2中上传文件时遇到问题。 我想使用new FormData()方法提交包含一些文本字段和文件输入的表单,但Request :: all()似乎在控制器中返回一个空数组。 仅当我尝试上传图像时才会出现此问题。 如果我将文件输入留空,一切都很好,所有文本输入都显示出来。 我试图用每个选项改变AJAX调用,但结果相同。
表格:
<form id="my_form"> <input type="text" name="u_name" placeholder="Enter name" value="{{ $user->NAME }}"> <input type="email" name="u_email" placeholder="Enter email" value="{{ $user->EMAIL }}"> <input type="file" name="u_picture"> <input type="submit" id="submit" value="Save"> </form>jQuery AJAX请求:
$('#my_form').submit(function(){ $.ajax({ type: "POST", headers: {'X-CSRF-TOKEN': "{{ csrf_token() }}" }, dataType: "json", url: "/submit", contentType: false, data : new FormData($('#my_form')[0]), processData: false, async: true, success: function(data){ console.log(data); } }).fail(function(data) { console.log('Error'); }); return false; });控制器方法:
public function editProfile(){ if(Request::hasFile('u_image'){ return 'It has image'; } return Request::all(); }文件输入为空的输出:
Object {u_name: "Test", u_email: "abc@abc.com"}文件输入非空的输出:
[]但是 ,在两种情况下似乎都会正确发送请求,因为在Google Chrome中的网络标签中,请求是这样的:
------WebKitFormBoundaryFZlyLOFBAsPNOk7v Content-Disposition: form-data; name="u_name" Test ------WebKitFormBoundaryFZlyLOFBAsPNOk7v Content-Disposition: form-data; name="u_email" abc@abc.com ------WebKitFormBoundaryFZlyLOFBAsPNOk7v Content-Disposition: form-data; name="u_picture"; filename="1.jpg" Content-Type: image/jpeg ------WebKitFormBoundaryFZlyLOFBAsPNOk7v--我也尝试用async:false发送AJAX async:false ,但没有结果。 有什么我做错了吗?
编辑:即使使用Postman的AJAX调用,问题仍然存在
编辑2:我隔离了问题。 在我的原始代码中,我使用方法Request::hasFile('u_picture')来验证字段是否为空。 没有if语句,一切都像魅力一样(当然,在没有图片的情况下提交表单)。 所以现在我的问题是:我该如何解决这个问题?
I'm having an issue trying to upload a file in Laravel 5.2 via AJAX. I want to submit a form that contains some text fields and a file input using the new FormData() method, but the Request::all() seems to return an empty array in the controller. The problem is occurring only when I try to upload an image. If I leave the file input empty, everything is fine and all the text inputs are showing. I've tried to change the AJAX call with every option possible but it's the same result.
The form:
<form id="my_form"> <input type="text" name="u_name" placeholder="Enter name" value="{{ $user->NAME }}"> <input type="email" name="u_email" placeholder="Enter email" value="{{ $user->EMAIL }}"> <input type="file" name="u_picture"> <input type="submit" id="submit" value="Save"> </form>The jQuery AJAX request:
$('#my_form').submit(function(){ $.ajax({ type: "POST", headers: {'X-CSRF-TOKEN': "{{ csrf_token() }}" }, dataType: "json", url: "/submit", contentType: false, data : new FormData($('#my_form')[0]), processData: false, async: true, success: function(data){ console.log(data); } }).fail(function(data) { console.log('Error'); }); return false; });The controller method:
public function editProfile(){ if(Request::hasFile('u_image'){ return 'It has image'; } return Request::all(); }Output with file input empty:
Object {u_name: "Test", u_email: "abc@abc.com"}Output with file input NOT empty:
[]However, the request seems to be sent correctly in both cases because in network tab in google chrome the request is like this:
------WebKitFormBoundaryFZlyLOFBAsPNOk7v Content-Disposition: form-data; name="u_name" Test ------WebKitFormBoundaryFZlyLOFBAsPNOk7v Content-Disposition: form-data; name="u_email" abc@abc.com ------WebKitFormBoundaryFZlyLOFBAsPNOk7v Content-Disposition: form-data; name="u_picture"; filename="1.jpg" Content-Type: image/jpeg ------WebKitFormBoundaryFZlyLOFBAsPNOk7v--I also tried to send the AJAX with async:false, but no result. Is there anything that I am doing wrong?
Edit: The problem persists even with AJAX calls from Postman
Edit 2: I isolated the problem. In my original code I'm using the method Request::hasFile('u_picture') to verify if the field is empty. Without that if statement, everything works like charm (until the form is submited without the picture, of course). So my question now is: how do I fix this?
最满意答案
我以某种方式解决了这个问题。 我没有使用导致错误的Request::hasFile()方法,而是使用Validator facade来过滤请求。 所以我的新控制器看起来像这样:
public function editProfile(){ $validator = Validator::make(Request::all(),[ 'u_avatar' => 'required|mimes:jpeg,jpg,JPG,JPEG' ]); if($validator->fails()){ // Do whatever you want without the image } // Do whatever you want with the image }也许这不是正确的方法,但它正在发挥作用。 希望它会帮助某人。
I solved the problem...somehow. Instead of using the Request::hasFile() method that was causing the error, I used Validator facade to filter the request. So my new controller looks like this:
public function editProfile(){ $validator = Validator::make(Request::all(),[ 'u_avatar' => 'required|mimes:jpeg,jpg,JPG,JPEG' ]); if($validator->fails()){ // Do whatever you want without the image } // Do whatever you want with the image }Maybe it's not the proper way to do it, but it's working. Hope it will help someone.
更多推荐
发布评论