javascript - 使用 CKEditor 上传图像并在 html 中显示 img src（编辑器数据） - Reactjs

Question

下面是它在代码中的样子：

...

 <CKEditor
    editor={ ClassicEditor }
    data={this.state.htmlString}
    config={{
        ckfinder: {                               
            uploadUrl: 'http://localhost:5000/upload',
            
        }}}
    onChange={ ( event, editor ) => {
        const data = editor.getData();
        this.handleSubjectChange(data);
        console.log( { event, editor, data } );
        console.log(this.state.htmlString);
    } }
/>

...

在 server.js 中，我使用 Multiparty 上传图片：

...

import express from 'express'

import multiparty from 'connect-multiparty'

const app = express();

const MultipartyMiddleware = multiparty({uploadDir:'src/blogs/images'})

app.post('/upload',MultipartyMiddleware,(req,res)=>{
    console.log(req.files.upload)
})

...

从 console.log （整个对象）：

Object
data: "<p>sasasa</p><figure class="image"><img></figure>"
editor: rb {_context: En, id: "ef7e9d1eac6bb296e04f9d806d027c180", config: on, plugins: Tn, locale: Sn, …}
event: cn {source: ec, name: "change:data", path: Array(1), stop: ƒ, off: ƒ}
__proto__: Object

图像被上传到文件夹中：

问题：我无法在编辑器数据中显示 img src

Answer 1

您可以通过从服务器发送包含上传图像的路径 url 的响应来做到这一点。

app.post('/upload',MultipartyMiddleware,(req,res)=>{
    var imagePath = req.files.upload.path;
    
    res.status(200).json({
       uploaded:true,
       url: `${imagePath}`
   })
})