在 Laravel 中使用 filepond 上传图像时出现 419 错误

Question

我使用和编写的代码如下。我上传文件时收到 419 错误。

创建.blade.php

` // 获取文件输入元素的引用 const inputElement = document.querySelector('input[name="image"]');

    // Create a FilePond instance
    const pond = FilePond.create(inputElement);
    const token =  $('meta[name="csrf-token"]').attr('content');
    
    FilePond.setOptions({
        server: {
            process: '{{ route('admin.tmp-file-pond-upload') }}',
            revert: '{{ route('admin.tmp-file-pond-delete') }}',
            header: {
                'X-CSRF-TOKEN': token,
            },
        },
    });`

web.php

Route::middleware('auth')->as('admin.')->group(function(){

    Route::post('tmp-filpond-upload', [AdminController::class, 'tmpFilepondUpload'])->name('tmp-file-pond-upload');
    Route::delete('tmp-filpond-delete', [AdminController::class, 'tmpFilepondDelete'])->name('tmp-file-pond-delete');

});

AdminController.php

`public function tmpFilepondUpload(Request $request)
{
    if ($request->hasFile('image')) {
        $image = $request->file('image');
        $fileName = $image->getClientOriginalName();
        return $fileName;
    }
}`

尽管我在标头中提供了 csrf 令牌，但我无法克服页面过期错误。 app.blade.php 中的元标记中有一个 csrf 令牌。我在不同的页面上使用 csrf 令牌。

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

Answer 1

您需要首先在内容属性中使用您的令牌定义一个名为“csrf-token”的标头标签（假设您已经这样做了），然后您需要将“标头”放入“process”中，如下所示：

<script type="module">
    const token =  $('meta[name="csrf-token"]').attr('content');
    
    process: {
        url: '/upload-url',
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': token,
        }
    }
</script>

另外，检查文档