Адаптер загрузки CKEditor отправляет [объект Promise] на сервер - PullRequest
Новая
       12

Адаптер загрузки CKEditor отправляет [объект Promise] на сервер

1 голос
/ 11 марта 2019

Я пытался внедрить CKEditor5 в проект vuejs, и после того, как вся инфраструктура заработала, я не могу получить реальный файл для загрузки на php-сервер.Код вызывает сервер, и если я возвращаю сообщение об успешном завершении и URL-адрес файла, все работает правильно.Вот мой код: 

    <template> 
        ...
        <ckeditor :editor="editor" v-model="details.SystemText" :config="editorConfig"></ckeditor>
        ...
    </template>


    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
    class UploadAdapter {
        constructor(loader) {
            this.loader = loader;
        }

        upload() {
            return new Promise((resolve, reject) => {
                const data = new FormData();
                data.append('upload', this.loader.file);

                axios({
                    url: '/index/uploadimage',
                    method: 'post',
                    data,
                    headers: {
                        'Content-Type': 'multipart/form-data;'
                    },
                    withCredentials: false
                }).then(response => {
                    if (response.data.result == 'success') {
                        resolve({
                            default: response.data.url
                        });
                    } else {
                        reject(response.data.message);
                    }
                }).catch(response => {
                    reject ( 'Upload failed');
                });

            });
        }

        abort() {
        }
    }
    export default {
        data () {
                details: {},
                editor: ClassicEditor,
                editorConfig: {
                    extraPlugins: [ this.MyCustomUploadAdapterPlugin ],
                }
        },
        methods: {
            MyCustomUploadAdapterPlugin ( editor ) {
                editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {

                    return new UploadAdapter( loader );
                };
            },
        }

Если щелкнуть значок изображения на панели инструментов, правильно отобразится диалог выбора файла, а после выбора файла отправит сообщение на сервер.Тем не менее, двоичный файл не отправляется, а просто: 

Form Data

------WebKitFormBoundaryqPGA20WRKz9VvADd
Content-Disposition: form-data; name="upload"

[object Promise]

Я провел два дня, просматривая все другие плагины, такие как CKFinder и другие, и, похоже, я всегда получаю один и тот же контент, отправляемый на сервер.,Строка 

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

, кажется, не добавляет фактический файл, что, как я думаю, должно быть.

Мое значение this.loader 

loader.file
Promise {<pending>}
__proto__: Promise
catch: ƒ catch()
constructor: ƒ Promise()
finally: ƒ finally()
then: ƒ then()
Symbol(Symbol.toStringTag): "Promise"
__proto__: Object
[[PromiseStatus]]: "pending"
[[PromiseValue]]: undefined

Попытался использовать их облачный сервис, но указать мои собственные URL-адреса, и загрузка стала работать. 

                editorConfig: {
                    cloudServices: {
                        tokenUrl: '/index/tokenendpoint',
                        uploadUrl: '/index/uploadimage'
                    }
                }

Мне также удалось удалить весь код адаптера загрузки.

Спасибо

Ответы [ 3 ]

1 голос
/ 12 марта 2019

Используйте jQuery ajax.Я не могу найти эквивалент, используя fetch или axios.Ключ настраивает contentType: false и processData: false. 

upload() {
        return new Promise((resolve, reject) => {
            const data = new FormData();
            data.append('postedFile', this.loader.file);
            $.ajax({
                url: '/index/uploadimage',
                data,
                contentType: false,
                processData: false,
                type: 'POST',
                success: response => {
                    resolve({
                        default: response.data.url
                    });
                },
                error: () => {
                    reject('Upload failed');
                }
            });
        });
    }
0 голосов
/ 13 марта 2019

Причина вашей проблемы в том, что в версии 11.0.0 плагина ckeditor5-upload API был изменен, loader.file теперь является Promise (см. примечания к выпуску ). К сожалению, документы не были обновлены соответственно.

Вам нужно немного настроить функцию загрузки: 

upload() {
    return this.loader.file
        .then( uploadedFile => {
            return new Promise( ( resolve, reject ) => {
            const data = new FormData();
            data.append( 'upload', uploadedFile );

            axios( {
                url: '/index/uploadimage',
                method: 'post',
                data,
                headers: {
                    'Content-Type': 'multipart/form-data;'
                },
                withCredentials: false
            } ).then( response => {
                if ( response.data.result == 'success' ) {
                    resolve( {
                        default: response.data.url
                    } );
                } else {
                    reject( response.data.message );
                }
            } ).catch( response => {
                reject( 'Upload failed' );
            } );

        } );
    } );
}

Документы , которые имели эту проблему , теперь исправлены и используют обещание правильно. Надеюсь, что это решит проблему для вас!

0 голосов
/ 13 марта 2019

Они работают над этим, это ошибка.https://github.com/ckeditor/ckeditor5/issues/1618

...