formData在文件上传ajax laravel上返回空对象

Question

我正在尝试通过 ajax 上传图像，但我无法在控制器上获取图像文件，因为 formData 总是返回空对象。

表格：

<form id="category_add" method="#">
        <div class="card">
            <div class="formBlock">
                <div class="row">
                    {{ csrf_field() }}
                    <div class="col-md-12">
                        <div class="browseImg">
                            <i></i>
                            <span>Uplolad Here</span>
                            <input type="file" class="browseField" name="image" id="c_image">
                        </div>
                        <!-- <div class="formControl static">
                                    <label for="" class="formLabel">Category Name</label>
                                    <input type="text" name="" class="formField" placeholder="Enter your name" id="">
                                </div> -->
                    </div>
                    <div class="col-md-4">
                        <div class="formControl static">
                            <label for="" class="formLabel">Category Name</label>
                            <input type="text" name="name" class="formField" placeholder="Enter your name" id="name">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="formControl static">
                            <label for="" class="formLabel">Category Status</label>
                            <select name="status" class="formField" id="status">
                                <option value="0">Inactive</option>
                                <option value="1">Active</option>

                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="formControl static">
                            <label for="" class="formLabel">Position</label>
                            <input type="text" name="position" class="formField" placeholder="Enter position" id="position">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="formControl static textarea">
                            <label for="" class="formLabel">Description</label>
                            <textarea class="formField" placeholder="Enter your description" rows="5" name="description" id="description"></textarea>
                        </div>
                    </div>
                </div>

            </div>
        </div>


        <div class="btnBlock d-flex justify-content-end">
            <a href="#;" class="btn btn-link btn-md">Cancel</a>
            <button type="submit" class="btn btn-md">Add</button>
        </div>
    </form>

控制器：

public function categoryAdd(Request $request)
    {


        return $data = $request->all();
        $rules = [
            'name' => 'required',
            'status' => 'required',
            'position' => 'required',
            'description' => 'required',
            // 'image'=>''
        ];
        $validator = Validator::make($data, $rules);
        if ($validator->fails()) {
            $errors = $validator->errors();
            $errors = json_decode($errors);
            return response()->json(['success' => false, 'error' => 1, 'message' => $errors], 422);
            //Toastr::error("All field required");
            //return redirect()->route('category.list');
        } else {
            $token = Session::get('auth_user')['token'];



            try {
                $url = $this->base_api_url . 'services/category/add/';
                if (isset($data['image'])) {
                    
                    return $apiResponse = Http::withHeaders([
                        'Authorization' => 'Token ' . $token
                    ])->post($url, [
                        'data' =>
                        [
                            'name' => $data['name'],
                            'status' => $data['status'],
                            'position' => $data['position'],
                            'description' => $data['description'],

                            'encrypted' => false
                        ],
                        'c_image' => $data['image'],
                        "encoded_data" => "yes",


                    ]);
                } else {
                    $apiResponse = Http::withHeaders([
                        'Authorization' => 'Token ' . $token
                    ])->post($url, [
                        'data' =>
                        [
                            'name' => $data['name'],
                            'status' => $data['status'],
                            'position' => $data['position'],
                            'description' => $data['description'],

                            'encrypted' => false
                        ],
                        "encoded_data" => "yes",


                    ]);
                }



                if ($apiResponse['status'] == false) {
                    $response['error'] = 1;
                    $response['success'] = false;
                    $response['message'] = $apiResponse['message'];

                    //Toastr::error('category add failed', 'Please Try Again');
                    return response()->json($response);
                } else {
                    $response['error'] = 0;
                    $response['success'] = true;
                    $response['message'] = $apiResponse['message'];
                    // session(['auth_user' => $apiResponse['data']]);
                    //Toastr::success('category added successfully');
                    return response()->json($response);
                }
            } catch (\Exception $ex) {
                $response['error'] = 1;
                $response['success'] = false;
                $response['message'] = $ex->getMessage();

                //Toastr::error('Please contact with support', 'Something Went Wrong');
                return response()->json($response);
            }
        }
    }

一开始我正在返回数据，但它显示的图像对象是空的

ajax 请求：

$(document).ready(function () {
    var home = "{{route('category.list')}}";
    $(document).on('submit', '#category_add', function (e) {
        e.preventDefault();
         let add = "{{route('category.add')}}";
        var formData = new FormData(this);

        formData.append('c_image', $('#c_image')[0].files[0]);

        
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),

            },
            type: "POST",
            url: add,

            contentType: false,
            processData: false,
            data: formData,
            dataType: "json",
            success: function (response) {
                console.log(response);
                if (response.success == true) {
                    toastr.success("category add successful");
                    setTimeout(function () {
                        //window.location.href = home;
                    }, 2000);
                } else {
                    toastr.error(response.message);
                    setTimeout(function () {
                        // window.location.reload();
                    }, 2000);
                }

            },
            error: function (response) {
                if (response.status == 422) {
                    toastr.error("All field required");
                }
                else {
                    toastr.error("Something went wrong");
                }
                setTimeout(function () {
                    //window.location.reload();
                }, 2000);
            }
        })
    });
});

我在提交表单后得到这些数据：

{}"_token":"pPHld3dWcEmkVQszMajQZYoqrOLfcm3PmCQzs3GE","name":"check","status":"0","position":"88","description":"test","image":{},"c_image":{}

但正如我在请求有效负载上看到的那样，它显示了数据：

Answer 1

我在本地尝试了相同的代码，并在您的代码中发现了这些问题..

1. 在 Javascript 部分，从 ajax 请求中删除添加变量

       type: "POST",
       url: add, // Undefined variable error, I think correct variable  name is  home
   

2. 在你的控制器中，据我所知，返回请求的图像对象几乎是不可能的，你总是会得到空对象。

3. 如果您愿意，您也可以这样做以从代码中删除这一行，因为您总是会使用两个对象键获得相同的图像

   formData.append('c_image', $('#c_image')[0].files[0]);

4. 在 dd 函数中你会得到图像对象

   $rules = [
       'name' => 'required',
       'status' => 'required',
       'position' => 'required',
       'description' => 'required',
       'image'=>'required|image|mimes:jpeg,png,jpg,gif,svg' //
   ];
   $validator = \Validator::make($data, $rules);
   if ($validator->fails()) {
       $errors = $validator->errors();
       $errors = json_decode($errors);
       return response()->json(['success' => false, 'error' => 1, 'message' => $errors], 422);
       //Toastr::error("All field required");
       //return redirect()->route('category.list');
   } else {
       dd($data);
   }  
   

希望对您有所帮助，谢谢。 #快乐编码

Answer 2

你必须像下面这样使用

您的表单应如下所示

<form method="post" id="category_add" enctype="multipart/form-data">

在提交按钮中添加 id

<button type="submit" class="btn btn-md">Add</button>



$(document).ready(function(){
$('#category_add').on('submit', function(event){
    event.preventDefault();
    $.ajax({
        url:'{{route('category.list')}}',
        method:"POST",
        data:new FormData(this),
        dataType:'JSON',
        contentType: false,
        cache: false,
        processData: false,
        success:function(data){

            // Rest of your code

        }
   })
 })
})

Follow this