无法使用Laravel通过Ajax发布FormData(405错误)

时间:2017-12-06 12:03:08

标签: javascript php forms laravel

直截了当:此处的最终目标是能够在 Laravel 中使用一个按钮提交多个表单。其中一个表单包含文件上载字段。

尝试进行Ajax调用时,我收到405 Method Not Allowed错误。通过几个Stack Overflow问题,我已经设法将其缩小到下面的Ajax调用中的两个选项(processData,contentType)。

我的问题是,如果我删除了这两个,那么我会在new Formdata($this)上收到非法调用错误。那么,我如何提交文件上传,同时仍然保持Ajax呼叫?

Ajax通话

// Submit all forms

        $.each(forms, function(form){
            formData = new FormData(form);

            $.ajax({
                type: "POST",
                processData: false,
                contentType: false,
                url: $(this).attr('action'),
                data: formData,
                success: function(data){
                    console.log('Form submitted');
                },
                error: function(x, h, r){
                    console.log(x, h, r);
                }
            })
        });

表单所针对的路径功能

public function update(Request $request, $id)
{
    // Save clinic initially
    $clinic = Clinic::find($id);
    $clinic->update($request->all());

    // If image is present, save it and update it in the database table
    if ($request->file('clinic_logo')) {
        $file = $request->file('clinic_logo');
        $fileExtension = $file->getClientOriginalExtension();
        $filePath = '/img/profile_images/' . $request->get('clinic_name') . "." . $fileExtension;

        // Save Image
        $file->move(
            base_path() . '/public/img/profile_images/', $request->get('clinic_name') . "." . $fileExtension
        );

        // Update database table
        $clinic->logo = $filePath;
        $clinic->save();
    }

    $data = [
        'clinic' => $clinic,
        'categories' => Category::where('approved', 1)->pluck('name', 'id')
    ];

    $request->session()->flash('alert-success', 'Clinic has been successfully edited.');

    return redirect()->back();
}

我的带有选项的Chrome控制台的屏幕截图 enter image description here

我的Chrome控制台没有选项的屏幕截图 enter image description here

更新1

实际路由工作正常。如果我删除这两个Ajax选项,表单发布和数据更新正确,只是没有文件上传。如果我在表单中使用常规提交按钮,一切正常 - 包括上传数据。 Route是一个资源控制器,如下所示;

Route::resource('clinics', 'ClinicController'); 

更新2

所以现在至少,我知道为什么我收到405 method not allowed错误。设置processData: false会搞砸请求数据,导致Laravel不理解csrf_token_method field - 导致Method not allowed。仍然不确定如何解决这个问题,只是认为额外的信息可能会有所帮助。

更新3

路线列表,视要求而定。

|        | POST      | clinics                           | clinics.store         | App\Http\Controllers\ClinicController@store                            | web          |
|        | GET|HEAD  | clinics                           | clinics.index         | App\Http\Controllers\ClinicController@index                            | web          |
|        | PUT       | clinics/approve/{id}              | clinics.approve       | App\Http\Controllers\ClinicController@approve                          | web          |
|        | GET|HEAD  | clinics/create                    | clinics.create        | App\Http\Controllers\ClinicController@create                           | web          |
|        | GET|HEAD  | clinics/request                   |                       | App\Http\Controllers\ClinicController@request                          | web          |
|        | PUT|PATCH | clinics/{clinic}                  | clinics.update        | App\Http\Controllers\ClinicController@update                           | web          |
|        | GET|HEAD  | clinics/{clinic}                  | clinics.show          | App\Http\Controllers\ClinicController@show                             | web          |
|        | DELETE    | clinics/{clinic}                  | clinics.destroy       | App\Http\Controllers\ClinicController@destroy                          | web          |
|        | GET|HEAD  | clinics/{clinic}/edit             | clinics.edit          | App\Http\Controllers\ClinicController@edit                             | web          |

表单非常大,但它们是使用表单模型绑定模式found here构建的。

{!! Form::model($clinic, ['route' => ['clinics.update', $clinic], 'method' => 'PUT', 'files' => true, 'class' => 'multi-part-form']) !!}

1 个答案:

答案 0 :(得分:-2)

处理带附件的ajax时。在您的javascript中隐含FormData() function将无法轻松绑定您的文件附件。你需要将你的附件分别绑定到这样的东西。

formData = new FormData(form);
formData.append('image', $('input[type=file]')[0].files[0]); 

我希望这会对你有所帮助