代码之家 › 专栏 › 技术社区 › Steve

如何将csrf令牌与此文件上载一起传递

laravel-5.3 jquery-plugins laravel jquery php

2

Steve · 技术社区 · 9 年前

我有这个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');

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

4 回复 | 直到 9 年前

1

6

muttalebm 9 年前

首先,在表单中添加此代码 <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参数。希望这有帮助。

2

1

Sagar Patel 9 年前

以下 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});

3

0

Birdy 9 年前

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

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

然后,在使用任何脚本函数或任何ajax调用时,您可以通过以下方式轻松访问该值:

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

uploadExtraData: meta_token.attr("content")

用于测试发展您还可以将url作为例外添加到VerifyCsrfToken中间件类中,在生产模式下不建议这样做,因为这会使您面临不必要的安全风险。但是,如果您在本地进行测试,而不是在生产模式下,您可以简单地执行以下操作:

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

4

0

Fermin Pitol 5 年前

我尝试了这篇文章中的所有示例,但没有得到好的结果

$("#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},
            },