CKEditor 上传适配器发送 [object Promise] 到服务器

Question

我一直在尝试将 CKEditor5 实施到一个 vuejs 项目中，在让所有基础设施正常工作后，我无法将实际文件上传到 php 服务器。代码调用服务器，如果我 return 一条成功消息和文件 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 );
                };
            },
        }

单击工具栏中的图像图标将正确显示文件 select 对话，文件 selection 将向服务器提交一个 post。但是，二进制文件并没有发送，只是简单地：

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

尝试使用他们的云服务，但指向我自己的 urls 并且上传工作正常。

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

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

谢谢

Answer 1

使用jQueryajax。我找不到使用 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');
                }
            });
        });
    }

Answer 2

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

Answer 3

你的问题的原因是在 11.0.0 版的 ckeditor5-upload 插件中 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 上传适配器发送 [object Promise] 到服务器

CKEditor Upload Adapter Sends [object Promise] to Server

image

vue.js

upload

ckeditor5