Question

当我尝试上传多个图像时，我得到的是空对象。
它抛出validation.required错误，这意味着我没有得到images对象。
image_upload.blade.php

<div class="modal fade" id="ImageUploadDataModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
                <div class="modal-dialog" role="document" style="width: 50%;">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title" id="defaultModalLabel">Upload Images</h4>
                        </div>
                        <div class="modal-body">
                            <form name="img_upload" id="upload_img_form" enctype="multipart/form-data">
                                <input type="hidden" name="_token" value="{{{ csrf_token() }}}" /> 
                                <input type="hidden" name="Type" value="B" /> 
                                <div class="row">
                                    <div class="col-sm-12">
                                        <label for="UploadImages">Select Images</label>
                                        <div class="form-group form-group1" >
                                            <div class="form-line">
                                                <input type="file" name="images[]" class="imgage_change" id="UploadImgages"  multiple> 
                                            </div>
                                        </div>
                                    </div>
                                </div>              
                            </form>
                            <div class="clearfix"></div> 
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-md btn-success waves-effect upload_images" id="btnImport" style="margin: 0px;" data-url="{{URL::to('upload/images')}}" data-frmid="#upload_img_form" data-modalname="#ImageUploadDataModal">UPLOAD</button>
                            <button type="button" class="btn btn-md  btn-danger waves-effect clearpoup" data-dismiss="modal" >CLOSE</button>
                        </div> 
                    </div>
                </div>
            </div>

Ajax文件

$(document).on("click", '.upload_images', function () {
                    var aurl = $(this).data('url');
                    var frm = $(this).data('frmid');
                    var modalName = $(this).data('modalname');
                    var $form = $(frm)[0]; // You need to use standard javascript object here
                    var formData = new FormData($form);               
                    $.ajax({
                        type: "POST",
                        url: aurl,
                        data: formData,
                        cache: false,
                        processData: false, // Don't process the files
                        contentType: false, // Set content type to false as jQuery will tell the server its a query string request
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                        },
                        beforeSend: function () {
                            $('.upload_images').attr("disabled", true);
                        },
                        success: function (response) {
                            if (modalName != "") {
                                if (response.error_status == true)
                                {
                                    $(modalName).modal('toggle');
                                    $('.upload_images').attr("disabled", false);
                                    oTable.draw(false);
                                } else {
                                    $('.upload_images').attr("disabled", false);
                                    swal("Error!", response.message, "error");
                                }
                            } else {
                                window.location.reload();
                            }
                        },
                        error: function (response) {
                            $('.upload_images').attr("disabled", false);
                            var errors = $.parseJSON(response.responseText);
                            resetModalFormErrors();
                            associate_errors(errors, $form);
                        }
                    });

                });

UploadImagesController.php

public function store(Request $request)
    {


      exit();
        $objValidation = Validator::make($request->all(), [
            'images' => 'required',

        ]);

        if ($objValidation->fails()) {
            $errors = $objValidation->errors();
                return response()->json($errors, 422);
            // return Response::json(['title' => 'Error!', 'error_status' => FALSE, 'message' => 'Select at least one image, only JPG, and PNG are allowed!']);
        }

        $data =[];
        if ($request->hasfile('images')) {

            foreach ($request->file('images') as $image) {
                $name = $image->getClientOriginalName();
                $image->move( public_path('/uploaded_images'), $name);
                $image->save();
                $path = public_path('/uploaded_images');  
                exit();
                $data[] = $name;
            }
        }

        $image = new Image();
        $image->img_url = json_encode($data);
        $image->save();
  }
}

Answer 1

按如下所示对formData进行更改，这样可以在后端为您正确上传文件。

var formData = new FormData();
$.each($('#UploadImgages')[0].files,function(i,file){
        formData.append('images',file); 
});

在多张图片上获取空对象

1 个答案: