Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/laravel/10.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Ajax Ckeditor 5图像上载不适用于laraval 7_Ajax_Laravel_File Upload_Wysiwyg_Ckeditor5 - Fatal编程技术网

Ajax Ckeditor 5图像上载不适用于laraval 7

Ajax Ckeditor 5图像上载不适用于laraval 7,ajax,laravel,file-upload,wysiwyg,ckeditor5,Ajax,Laravel,File Upload,Wysiwyg,Ckeditor5,我正在尝试将ckeditor 5与我正在创建的laravel 7博客集成。但是,我保留了response未捕获类型error:response为null的错误 我的目标是在刀片文件的ajax部分使用这个自定义适配器异步存储图像。一旦使用WYSIWYG选择图像文件,xhr将向负责将文件保存在服务器上的控制器方法发送请求 我的刀片文件 @extends('layouts.master') @section('meta') <meta name="csrf-token&quo

我正在尝试将ckeditor 5与我正在创建的laravel 7博客集成。但是,我保留了response未捕获类型error:response为null的错误

我的目标是在刀片文件的ajax部分使用这个自定义适配器异步存储图像。一旦使用WYSIWYG选择图像文件,xhr将向负责将文件保存在服务器上的控制器方法发送请求

我的刀片文件

    @extends('layouts.master')

@section('meta')
<meta name="csrf-token" content="{{ csrf_token()}}">
@endsection

@section('script')
<script type="text/javascript" src="{{ asset('ckeditor/ckeditor.js') }}"></script>
@endsection

@section('main')
        {!! Form::open(['action' => 'BlogController@store', 'method'=>'POST', 'enctype'=>'multipart/form-data']) !!}
        <div class="form-group">
            {{Form::label('title', 'Title')}}
            {{Form::text('title', '',['placeholder'=>"Title",'class'=>'form-control'])}}
        </div>
        <div class="form-group">
            {{Form::label('Blog Body')}}
            {{Form::textarea('body', '',['placeholder'=>"Blog Post Body",'id'=>'ckeditor','class'=>'form-control'])}}
        </div>
        
            {{Form::submit('Submit',['class'=>'btn btn-primary'])}}
    </div>
            
    {!! Form::close() !!}
@section('bottomScripts')

<script>
    class MyUploadAdapter {
    constructor( loader ) {
        // CKEditor 5's FileLoader instance.
        this.loader = loader;

        // URL where to send files.
        this.url = 'http://mylaravelpage.test/upload_image';
    }

    // Starts the upload process.
    upload() {
        return new Promise( ( resolve, reject ) => {
            this._initRequest();
            this._initListeners( resolve, reject );
            this._sendRequest();
        } );
    }

    // Aborts the upload process.
    abort() {
        if ( this.xhr ) {
            this.xhr.abort();
        }
    }

    // Example implementation using XMLHttpRequest.
    _initRequest() {
        const xhr = this.xhr = new XMLHttpRequest();

        xhr.open( 'POST', this.url, true );
        xhr.responseType = 'json';
    }

    // Initializes XMLHttpRequest listeners.
    _initListeners( resolve, reject ) {
        const xhr = this.xhr;
        const loader = this.loader;
        const genericErrorText = 'Couldn\'t upload file:' + ` ${ loader.file.name }.`;
        const token = document.querySelector('meta[name="csrf-token"]').content;
        xhr.addEventListener( 'error', () => reject( genericErrorText ) );
        xhr.addEventListener( 'abort', () => reject() );
        xhr.setRequestHeader('X-CSRF-TOKEN', token);
        xhr.addEventListener( 'load', () => {

            const response = xhr.response;
            // const response = "this is just a response";
            if ( !response || response.error ) {
               // return reject( response && response.error ? response.error.message : genericErrorText );
               // return response.error;
               console.log(response);
            }

            // If the upload is successful, resolve the upload promise with an object containing
            // at least the "default" URL, pointing to the image on the server.
            resolve( {
                default: response.url
            } );
        } );

        if ( xhr.upload ) {
            xhr.upload.addEventListener( 'progress', evt => {
                if ( evt.lengthComputable ) {
                    loader.uploadTotal = evt.total;
                    loader.uploaded = evt.loaded;
                }
            } );
        }
    }

    // Prepares the data and sends the request.
    _sendRequest() {
        const data = new FormData();

        data.append( 'upload', this.loader.file );

        this.xhr.send( data );
    }
}


function MyCustomUploadAdapterPlugin( editor ) {
    editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
        return new MyUploadAdapter( loader );
    };
}
    ClassicEditor
        .create( document.querySelector( '#ckeditor' ), {
       extraPlugins: [ MyCustomUploadAdapterPlugin ],})
        .catch( error => {
            console.error( error );
        } );
</script>
@endsection
@endsection
  Route::post('upload_image', 'ImageUploadController@uploadImage')->name('upload');
多谢各位

  Route::post('upload_image', 'ImageUploadController@uploadImage')->name('upload');