时间戳

首页 > 解决方案 > 如何正确上传来自CKEditor5的express-fileupload图像？

express - 如何正确上传来自CKEditor5的express-fileupload图像？

问题描述

我的api如下

router.post("/upload", async (req, res) => {
if (!req.files || Object.keys(req.files).length === 0) {
return res.status(400).send("No files were uploaded.");
}
console.log(req.files)
let file = req.files.upload;
let uploadPath = __dirname + "/../public/" + file.name;
file.mv(uploadPath, function (err) {
if (err) {
console.log(err)
return res.status(500).send(err)
}
res.sendStatus(200);
});
});

我的反应组件


<CKEditor
editor={ClassicEditor}
config={{
ckfinder: {
uploadUrl: "/api/upload",
},
}}
data={props.state.tech.assess_info}
onChange={(event, editor) => {
..
}}
/>

目前，当我从 CKeditor 上传图像时，图像已成功上传（写入服务器端的“public/{filename}”）。但是 CKEditor 错误弹出并说明“无法上传”。我相信 CKeditor 期待特定的响应代码，而不仅仅是 HTTP 状态 200。你们怎么看？

标签： expressckeditor

解决方案

Ckeditor 期待来自 API 的以下响应。

res.status(200).json({
      uploaded: true,
      url: `/uploads/${file.name}`,
    });

如果有人需要，完整的 api 代码。

// Upload a file
router.post("/upload", async (req, res) => {
  if (!req.files || Object.keys(req.files).length === 0) {
    return res.status(400).send("No files were uploaded.");
  }
  let file = req.files.upload;
  let uploadPath = __dirname + "/../public/uploads/" + file.name;
  file.mv(uploadPath, function (err) {
    if (err) return res.status(500).send(err);
    res.status(200).json({
      uploaded: true,
      url: `/uploads/${file.name}`,
    });
  });
});

推荐阅读