Question

我有这个HTML：

<input id="input-id" type="file" accept=".mp3, .mp4" name="file" class="form-control"><br>
<input type="hidden" id="getfilename" name="uploadedfile" value="">

这个jquery插件上传文件：

$("#input-id").fileinput({
        maxFileSize: 264000,
        uploadUrl: "{{url('/rate/uploadfile')}}", 
        uploadAsync: true,
        allowedFileExtensions: ['mp3', 'mp4', 'mpeg', 'flv'],
        maxFileCount: 1,
        showUpload: true,
        dropZoneEnabled: false
});

Web中间件组下的路径：

Route::post('rate/uploadfile', 'RateController@uploadfile');

每当我尝试上传文件时，我都会遇到熟悉的错误：

VerifyCsrfToken.php中的TokenMismatchException

Answer 1

首先在表单上添加此代码 <input type="hidden" id="csrf_token" name="_token" value="{{ csrf_token() }}">这会使用laravel的csrf_token（）函数在表单上添加一个csrf标记字段。然后在你的脚本上添加这个

    $("#input-id").fileinput({
            maxFileSize: 264000,
            uploadUrl: "{{url('/rate/uploadfile')}}", 
            uploadAsync: true,
            uploadExtraData:{'_token':$('#csrf_token').val()
            allowedFileExtensions: ['mp3', 'mp4', 'mpeg', 'flv'],
            maxFileCount: 1,
            showUpload: true,
            dropZoneEnabled: false
    });

如果你使用http://plugins.krajee.com/file-input这个插件进行文件上传，那么uploadExtraData:{'_token':$("#csrf_token").val()},这一行应该添加csrf标记作为ajax请求的额外post参数。希望这会有所帮助。

Answer 2

这是关注 link

第一步添加元

<meta name="csrf-token" content="{{ csrf_token() }}">

第二步

$("#input-id").fileinput({
    maxFileSize: 264000,
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    uploadUrl: "{{url('/rate/uploadfile')}}", 
    uploadAsync: true,
    allowedFileExtensions: ['mp3', 'mp4', 'mpeg', 'flv'],
    maxFileCount: 1,
    showUpload: true,
    dropZoneEnabled: false});

Answer 3

您还可以将csrf_token添加到每个视图，并使用表单中的隐藏输入字段进行保存。为此，请使用元标记将其放在标题中。

<meta name="_token" content="{{ csrf_token() }}"/>

然后，您可以使用任何脚本函数或任何ajax调用轻松访问该值：

var meta_token = $("meta[name=_token]");

然后像muttalebm所说，使用uploadExtraData可以执行以下操作：

uploadExtraData: meta_token.attr("content")

为了测试开发，您还可以在VerifyCsrfToken中间件类中添加url作为例外，在生产模式下不建议这样做会打开您不必要的安全风险。但是，如果您在本地测试而不是在生产模式下，则可以执行以下操作：

您的VerifyCsrfToken类中的

protected $except = ['/rate/uploadfile'];。

Answer 4

我尝试了这篇文章中的所有示例，但没有一个很好的结果，对我有用的配置是

$("#input-id").fileinput({
            uploadUrl: "http://127.0.0.1:8000/api/processfile",
            enableResumableUpload: true,
            allowedFileExtensions : ['json'],
            ajaxSettings : {
                'headers': {"X-CSRFToken": crf_token},
            },
            maxFileCount: 10,
            showCancel: true,

阅读文档，标题的正确位置是 ajaxSettings：https://plugins.krajee.com/file-input/plugin-options#ajaxSettings

这段代码适用于python Django或flask，我不知道为什么PHP适用

ajaxSettings : {
                'headers': {"X-CSRF-TOKEN": crf_token},
            },

为了避免我目前使用的问题

ajaxSettings : {
                'headers': {'X-CSRF-TOKEN': crf_token , "X-CSRFToken": crf_token},
            },

如何通过此文件上传传递csrf令牌

4 个答案: