Question

我一直在尝试将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

尝试使用他们的cloudservice，但指向我自己的URL，上传成功。

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

我还能够删除所有上传适配器代码。

谢谢

Answer 1

使用jQuery ajax。我无法使用fetch或axios找到等效项。关键是设置contentType：false和processData：false。

<keep-alive>
<CartComponent />
</keep-alive>

Answer 2

他们正在努力，这是一个错误。 https://github.com/ckeditor/ckeditor5/issues/1618

Answer 3

您遇到问题的原因是，在ckeditor5-upload插件的11.0.0版本中，API进行了更改，loader.file现在是Promise（请参阅release notes）。不幸的是，文档没有得到相应的更新。

您需要稍微调整上传功能：

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' );
            } );

        } );
    } );
}

docs that had this issue现在已修复，可以正确使用promise。希望这可以为您解决问题！

CKEditor上载适配器将[对象承诺]发送到服务器

3 个答案: