RouteCollection.php第218行中的Laravel XMLHttpRequest MethodNotAllowedHttpException：

Question

I'm uploading image using laravel php and XMLHttpRequest() and i am getting following error

MethodNotAllowedHttpException in RouteCollection.php line 218

following is my javascript code that handles the form submit:

 $(document).on('submit','form',function(e){
    e.preventDefault();
    $form=$(this);
    uploadImage($form);

  });

  function uploadImage($form){
  $form.find(".progress-bar").removeClass("progress-bar-success").removeClass("progress-bar-danger");
  var formdata=new FormData($form[0]);
  var request=new XMLHttpRequest();

  // progress event...

  request.upload.addEventListener('progress',function(e){

    var percent=Math.round(e.loaded/e.total * 100);
    console.log('progress: '+percent);
    $form.find('.progress-bar').width(percent+'%').html(percent+'%');

  });
  // progress completed load event

  request.upload.addEventListener('load',function(e){

    var percent=e.loaded/e.total * 100;
    console.log('load: '+percent);
    $form.find('.progress-bar').addClass('progress-bar-success').html('upload completed');

  });


  request.open('post','productImage.add');
  request.send(formdata);

  $form.on('click','.cancel',function(){

    request.abort();
    $form.find('.progress-bar').addClass('progress-bar-danger').removeClass('progress-bar-success').html('upload aborted...');

  });


}

This is my html form whose info is sent to the php route

 <form role="form">
                    <label>Product Image:</label>
                    <input type="file" name="image">
                    <button type="submit" class="btn btn-info btn-sm upload">Upload</button>
                    <button type="button" class="btn btn-danger btn-sm cancel">Cancel</button>
                    <div class="progress progress-striped active">                   
                        <div class="progress-bar" style="width:0%"></div>
                    </div>

          </form>

this is my routes file:

Route::group(['prefix' => 'admin'], function () {

    Route::get('/', function () {

        return view('welcome');

    });

    Route::auth();

    Route::get('/home', [

        'uses'=>'HomeController@index',
        'as'=>'home'

        ]);

    Route::post('/productAdd', [

        'uses'=>'productsController@add',
        'as'=>'product.add'

    ]);

    Route::post('/productImageAdd', [

        'uses'=>'productsController@addImage',
        'as'=>'productImage.add'

    ]);

});

and finally this is my post controller code:

class productsController extends Controller
{
  function add(Request $request){

        $product= new product();
        $product->productName=$request["name"];
        $product->description=$request["description"];
        $product->discount=$request["discount"];

        $request->user()->products()->save($product);
        return redirect()->route('home');

    }

    function addImage(Request $request){
      print_r($request);
    }




}

Answer 1

You forgot the token for CSRF protection. Add this hidden field to your form:

<input type="hidden" name="_token" value="{{ csrf_token() }}">

That should do the trick!

Edit: dont forget to send the _token with the request your making.