Question

您好，我正在通过ajax提交表单。

<form id="addProductForm" action="javascript:void(0)" enctype="multipart/form-data">
    <input type="hidden" id="productId">
        <div class="row">
            <label for="caption" class="col-md-4 col-form-label">Post Image</label>
            <input type="file" class="form-control-file" id="image" name="image">   
         </div>
    <div class="row ">
        <button type="submit" id="submitAddProduct" class="btn btn-primary mr-auto ml-auto" style="margin-top:15px;">Submit</button>
    </div>
</form>

这是提交脚本

$('#submitAddProduct').click(function(e){
    e.preventDefault();
    
    var image = $('#image').val();

    $.ajax({
        type:'GET',
        url:'/submitAddProduct',
        async:false,
        data:{
            'image' : image,
        },
        success:function(response) {
            $('#productId').val(response.msg);
        }
    });

});

在我的控制器中，

public function submitAddProduct(Request $request){
        $data = $request->validate([
            'image' => ['required','image']
        ]);

        public function submitAddProduct(Request $request){
        $data = $request->validate([
            'image' => ['required','image']
        ]);

        // dd(request('image')->store('uploads','public'));

        $imagePath = request('image')->store('uploads','public');

        $image = Image::make(public_path("storage/{$imagePath}"))->fit(1200, 1200);
        $image->save();

        $id = Products::insertGetId($data);

        if($id){
            $arr = array('msg' => $id);
        }
        return Response()->json($arr);
    }

        $id = Products::insertGetId($data);

        if($id){
            $arr = array('msg' => $id);
        }
        return Response()->json($arr);
    }

image val类似于C：// fakepath // name; 我希望将图像上传到公共文件夹中的存储/上传中。

但是我遇到了错误。 422 Unprocessable Entity

请帮助。谢谢

Answer 1

我目前的猜测是您的图片被从请求中删除，因为它大于upload_max_filesize和post_max_size允许的大小。您可以尝试发布非常小的（<100kB）图片吗？

我这样做的理由是，如果文件太大，它将被剥离。如果将其剥离，则验证规则将失败，从而导致422。

编辑：我刚刚注意到您正在使用GET作为HTTP动词。只能使用POST（以及PUT和PATCH，但现在不考虑这些文件）发送文件。

Answer 2

您正在使用GET上传没有任何意义的文件。

在路由文件中将路由从get更改为post。
更改ajax代码以发送POST而不是GET。
在ajax请求中包含CSRF令牌：
- 使用标题：
  1. 将以下html meta标签添加到标题（如果尚不存在）： <meta name="csrf-token" content="{{ csrf_token() }}">。
  2. 将标头添加到您的ajax：
```
$.ajaxSetup({
    headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
```
- 或者简单地，将令牌作为参数添加到请求本身中：
```
$.ajax({
    type:'POST',
    ...
    data:{
    '_token' : {{ csrf_token() }},
    ...
},
```
那应该可以解决问题！

旁注：尝试使用命名路由（更易于维护），我建议使用Axios。

默认情况下，resources / js / bootstrap.js文件包含Axios HTTP库，它将自动为您发送此消息-Laravel文档

图像未通过Ajax在Laravel中上传

2 个答案: