BlueImp 文件上传“错误：方法不允许” - Laravel 4 路由问题答案

【问题标题】：BlueImp File Upload "Error: Method Not Allowed" - Laravel 4 Routing IssueBlueImp 文件上传“错误：方法不允许” - Laravel 4 路由问题
【发布时间】：2014-09-26 07:14:52
【问题描述】：

我正在使用Blueimp.jquery file-upload 进行文件上传。我的应用程序也在Laravel 4 框架下，上传文件时出错。这个API在Firefox和Chrome中返回的错误是：

 Error: Method Not Allowed

我认为错误来自Laravel 上的routing，因为这是我在Firebug 开发控制台上发现的：

{"error":{"type":"Symfony\\Component\\HttpKernel\\Exception\\MethodNotAllowedHttpException","message":"","file":"C:\\xampp\\htdocs\\digisells\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\RouteCollection.php","line":210}}

这是表单代码：

{{ Form::open(['route'=>'image.store','id'=>'fileupload','files'=>true]) }}
<div class="col-md-12">
    <div class="container">
        <!-- file upload -->
     <!-- <form id="fileupload" action="file-upload/product-images" method="POST" enctype="multipart/form-data"> -->
        <!-- Redirect browsers with JavaScript disabled to the origin page -->
        <noscript><input type="hidden" name="redirect" value="http://blueimp.github.io/jQuery-File-Upload/"></noscript>
        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
        <div class="row fileupload-buttonbar">
            <div class="col-md-7">
                <!-- The fileinput-button span is used to style the file input field as button -->
                <span class="btn btn-success fileinput-button">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>Add files...</span>
                    <input type="file" name="thumbnail" multiple>
                </span>
                <button type="submit" class="btn btn-primary start">
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Start upload</span>
                </button>
                <button type="reset" class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel upload</span>
                </button>
                <button type="button" class="btn btn-danger delete">
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>Delete</span>
                </button>
                <input type="checkbox" class="toggle">
                <!-- The global file processing state -->
                <span class="fileupload-process"></span>
            </div>
            <!-- The global progress state -->
            <div class="col-md-5 fileupload-progress fade">
                <!-- The global progress bar -->
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                    <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                </div>
                <!-- The extended global progress state -->
                <div class="progress-extended">&nbsp;</div>
            </div>
        </div>
        <!-- The table listing the files available for upload/download -->
        <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
<!--     </form> -->
    </div>
  </div>
  {{ Form::close() }}

这是表单的routes 代码：

Route::resource('image', 'ImageUploadController');

在ImageUploadController 里面我有：

public function store()
    {
        $file = Input::file('thumbnail');
        $file = move(public_path().'/product/images/temp/', $file=>getClientOriginaLName());
    }

如果routing 是问题所在，我如何在我的routes 文件中注册这些routes？我的意思是我必须使用哪些动词以及每个函数中的代码？或者还有其他可能的解决方案吗？谢谢。

【问题讨论】：

如果您发布处理上传的当前路线以及相关的控制器操作，可能会更有帮助
@JofryHS 我已经编辑了我的问题...

标签： jquery file-upload laravel-4 routing blueimp

【解决方案1】：

我在 Blueimp.jquery 文件上传 + Laravel 4 中也遇到了这个错误。我通过使用 PUT 方法为我的 Ajax 调用添加路由解决了这个问题。（尽管据说 jquery-file-upload 使用 POST in their documentation）

我的路线是这样的：

Route::put('upload/image', array('as' => 'admin.upload', 'uses' => 'App\Controllers\Admin\ImageController@postUpload'));

javascript 调用：

$('.image-upload').fileupload({
url: '/upload/image',
dataType: 'JSON',
//type: 'POST',
done: function (e, data) {
    //console.log(data);
    $.each(data.result.files, function (index, file) {
        $('<p/>').text(file.name).appendTo($('.image-placeholder'));
    });
}
});

编辑：

经过进一步测试，我发现如果我在请求中添加额外的“data.formData”（如here 所述），它将使用 POST 方法而不是 PUT...

【讨论】：

【解决方案2】：

MethodNotAllowedHttpException 通常意味着您用来调用该 URL 的方法不正确。

假设当您尝试上传文件时发生此错误，则可能只是将该路由更改为 POST 路由而不是 GET 路由。

【讨论】：

是的，我还尝试使用 GET 或 POST 更改 method。但无论哪种方式，都会返回相同的错误。

【解决方案3】：

这对我有用：

$('.image-upload').fileupload({
    url: '/upload/image',
    dataType: 'JSON',
    method: 'POST',
    done: function (e, data) {
        //console.log(data);
        $.each(data.result.files, function (index, file) {
            $('<p/>').text(file.name).appendTo($('.image-placeholder'));
        });
    }
});

然后你会收到 csrf 错误，可以通过添加 csrf-field 来修复...检查这里： StackOverFlow

【讨论】：