首页 > 解决方案 > 我从 laravel 中的图像 ckeditor5 得到 419 错误

问题描述

我正在尝试实现 ckeditor5 -> simpleimageupload

我从 github 站点拉取数据,放到根项目中。
因此,在我的项目中,根项目中有两个节点模块,ckeditor5 文件夹中有一个节点模块。
https://github.com/ckeditor/ckeditor5 // 网站

我在没有修改的情况下导入了simpleuploadadapter模块并调用它,并将其添加到builtinPlugins中。

构建了ckeditor.js文件,将构建的文件移入public/js并测试。

如下图,很明显,csrf token值好像已经通过了,但是我收到了419未知错误码。

我该如何解决这个问题请帮忙。

创建.blade.php

<script src="{{ asset('js/ckeditor.js') }}"></script>
<script>
    ClassicEditor.create( document.querySelector( '#editor' ), {
        // plugins: SimpleUploadAdapter,
        simpleUpload: {
            // The URL that the images are uploaded to.
            uploadUrl: '{{ route('ck.upload') }}',

            // Enable the XMLHttpRequest.withCredentials property.
            withCredentials: true,

            // Headers sent along with the XMLHttpRequest to the upload server.
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        }
    } )
        .then( editor => {
            console.log('then');
            window.editor = editor;
            console.log(editor.plugins.get('SimpleUploadAdapter'));
        } )
        .catch( error => {
            console.error( 'There was a problem initializing the editor.', error );
        } );

ckeditor5/package/ckeditor5-build-classic/src/ckeditor.js

import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter';
...

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
    SimpleUploadAdapter,
    // CKFinder,
    ...
];

控制器/editsController.php

class EditorsController extends Controller
{
    public function upload(Request $request) {
        dd($request->hasFile('upload'));
        if($request->hasFile('upload')) {
            $originName = $request->file('upload')->getClientOriginalName();
            $fileName = pathinfo($originName, PATHINFO_FILENAME);
            $extension = $request->file('upload')->getClientOriginalExtension();
            $fileName = $fileName.'_'.time().'.'.$extension;

            $request->file('upload')->move(public_path('image'), $fileName);

            $CKEditorFuncNum = $request->input('CKEditorFuncNum');
            $url = asset('image/'.$fileName);
            $msg = 'Image uploaded successfully';
            $result = [
                'url' => $url,
                'msg' =>  $msg
            ];
            return $result;

        }
    }
}

在此处输入图像描述

标签: phplaravel-8ckeditor5

解决方案


推荐阅读