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

Question

我一直在尝试将 CKEditor5 实现到 vuejs 项目中，在所有基础设施正常工作后，我无法将实际文件上传到 php 服务器。该代码调用服务器，如果我返回成功消息和文件 url，则一切正常。这是我的代码：

\n\n

    <template> \n        ...\n        <ckeditor :editor="editor" v-model="details.SystemText" :config="editorConfig"></ckeditor>\n        ...\n    </template>\n\n\n    import ClassicEditor from \'@ckeditor/ckeditor5-build-classic\';\n    class UploadAdapter {\n        constructor(loader) {\n            this.loader = loader;\n        }\n\n        upload() {\n            return new Promise((resolve, reject) => {\n                const data = new FormData();\n                data.append(\'upload\', this.loader.file);\n\n                axios({\n                    url: \'/index/uploadimage\',\n                    method: \'post\',\n                    data,\n                    headers: {\n                        \'Content-Type\': \'multipart/form-data;\'\n                    },\n                    withCredentials: false\n                }).then(response => {\n                    if (response.data.result == \'success\') {\n                        resolve({\n                            default: response.data.url\n                        });\n                    } else {\n                        reject(response.data.message);\n                    }\n                }).catch(response => {\n                    reject ( \'Upload failed\');\n                });\n\n            });\n        }\n\n        abort() {\n        }\n    }\n    export default {\n        data () {\n                details: {},\n                editor: ClassicEditor,\n                editorConfig: {\n                    extraPlugins: [ this.MyCustomUploadAdapterPlugin ],\n                }\n        },\n        methods: {\n            MyCustomUploadAdapterPlugin ( editor ) {\n                editor.plugins.get( \'FileRepository\' ).createUploadAdapter = ( loader ) => {\n\n                    return new UploadAdapter( loader );\n                };\n            },\n        }\n\n

\n\n

单击工具栏中的图像图标将正确显示文件选择对话框，选择文件后将向服务器提交帖子。然而，二进制文件并没有被发送，而是简单地：

\n\n

Form Data\n\n------WebKitFormBoundaryqPGA20WRKz9VvADd\nContent-Disposition: form-data; name="upload"\n\n[object Promise]\n\n

\n\n

我花了两天时间查看所有其他插件，例如 CKFinder 等，并且我似乎总是收到发送到服务器的相同内容。线路

\n\n

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

\n\n

似乎没有附加我认为应该做的实际文件。

\n\n

我的 this.loader 的值是

\n\n

loader.file\nPromise {<pending>}\n__proto__: Promise\ncatch: \xc6\x92 catch()\nconstructor: \xc6\x92 Promise()\nfinally: \xc6\x92 finally()\nthen: \xc6\x92 then()\nSymbol(Symbol.toStringTag): "Promise"\n__proto__: Object\n[[PromiseStatus]]: "pending"\n[[PromiseValue]]: undefined\n

\n\n

尝试使用他们的云服务，但指向我自己的网址，这使得上传工作正常。

\n\n

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

\n\n

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

\n\n

谢谢

\n

Answer 1

您的问题的原因是，在 ckeditor5-upload 插件的 11.0.0 版本中，API 已更改，loader.file现在是 a 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' );
            } );

        } );
    } );
}

存在此问题的文档现已修复并正确使用 Promise。希望这能为您解决问题！