【问题标题】:CKEditor: Image uploaded but still getting an alert saying can't upload file:filename (using ckfinder) in reactCKEditor:图像已上传,但仍然收到警告说无法上传文件:文件名(使用 ckfinder)在反应
【发布时间】:2021-07-24 15:04:05
【问题描述】:

我正在为我的博客制作一个文本编辑器(使用 React)并使用 CKEditor。我在 Windows 机器上使用快速服务器来处理图像上传请求。当我在 Windows 机器上浏览上传目录时,该文件存在,但在 CKEditor 页面上出现以下错误:

这是CKEditor组件代码(使用react):

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

【问题讨论】:

    标签: javascript node.js reactjs ckeditor


    【解决方案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}`
        })
    })
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-20
      • 2021-08-10
      • 1970-01-01
      • 2014-04-06
      • 2012-01-03
      相关资源
      最近更新 更多