使用 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}`
   })
})