CKEditor：圖像已上傳，但仍收到警告說無法上傳文件：文件名（使用 ckfinder）在反應

Question

我正在為我的博客（使用 React）制作一個文本編輯器，並為此使用 CKEditor。 我在 windows 機器上使用快速服務器來處理圖像上傳請求。 當我瀏覽 windows 機器上的上傳目錄時，該文件存在，但在 CKEditor 頁面上出現以下錯誤：

這是 CKEditor 組件代碼（使用反應）：

<CKEditor 
                editor={ClassicEditor}
                data='<p>Hello World</p>'
                onChange={(event,editor) => {
                    setHtml(editor.getData());
                    console.log(html)
                }}
                config={
                    {
                        ckfinder: {
                            uploadUrl:'http://localhost:8000/upload'
                        }
                    }
                }
            />

這是服務器代碼（使用快遞）：

const express = require('express');
const PORT = 8000;
const app = express();
const bodyparser = require('body-parser'); //Body parsing middle ware
const morgan = require('morgan'); //HTTP request logger middle ware
const multipart = require('connect-multiparty');
const MultipartMiddleWare = multipart({uploadDir:'./uploads'});
const cors = require('cors'); // Middle ware to handle cors

app.use(cors())
app.use(bodyparser.urlencoded({extended: true}));
app.use(bodyparser.json());
app.get('/', (req, res) => {
    res.status(200).json({
        message: "Test MSG"
    })
})

app.post('/upload',MultipartMiddleWare,(req,res) => {
    res.send("Success");
    console.log(req.files.upload)
})

app.listen(PORT, console.log(`server has successfully startet at PORT: ${PORT}`))

Answer 1

上傳圖片的正確響應是

{
   uploaded: true,
   url: 'path to uploaded image'
}

所以在你的 app.post 中使用以下代碼：

app.post('/upload',MultipartMiddleWare,(req,res) => {

    let tempFile = req.files.upload;
    let path = tempFile.path;

    res.status(200).json({
        uploaded: true,
        url: `http://localhost:8000/${path}`
    })
})