通过CKEditor 5将图像上传到Express Server会在Angular应用程序中出现Multer错误

Question

我正在为我的Angular应用程序使用CKEditor(@CKEditor/ckeditor5 build-classic(。我在将图像从前端上传到后端时遇到问题。后端路线运行良好。我在Postman上测试了它，成功地发布了一张图片。但当我使用CKFinder将图像从Ckeditor上传到Express后端时；MulterError：意外字段"；。这是我上传图片的快捷路线。

router.post('/archive', upload.single('file'), function(req, res, next) {
if(!req.file) {
return res.status(500).send({ message: 'Upload fail'});
} else {
html = "";
html += "<script type='text/javascript'>";
html += "    var funcNum = " + req.query.CKEditorFuncNum + ";";
html += "    var url     = "/public/images/" + req.file.filename + "";";
html += "    var message = "Uploaded file successfully";";
html += "";
html += "    window.parent.CKEDITOR.tools.callFunction(funcNum, url, message);";
html += "</script>";
res.send(html);
//req.body.imageUrl = 'http://public/images/' + req.file.filename;
Gallery.create(req.body, function (err, gallery) {
if (err) {
console.log(err);
return next(err);
}
res.json(gallery);
});
}
});

这是我在组件中使用的角度代码，用于将图像保存到后端。

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
public editor = ClassicEditor;
public config:any = {
ckfinder: {
options: {
resourceType: 'Images'
},
uploadUrl: 'http://localhost:3000/gallery/archive/'
}
}

我想问题出在我的上传URL上，但我不知道它是什么。有人能给我指引正确的方向吗？非常感谢您的帮助。非常感谢。

编辑

我的Multer配置：

const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, './public/images');
},
filename: (req, file, cb) => {
//console.log(file);
var filetype = '';
if(file.mimetype === 'image/gif') {
filetype = 'gif';
}
if(file.mimetype === 'image/png') {
filetype = 'png';
}
if(file.mimetype === 'image/jpeg') {
filetype = 'jpg';
}
cb(null, 'image-' + Date.now() + '.' + filetype);
}
});
const upload = multer({storage: storage});

Answer 1

这是告诉fieldName不匹配的错误。您已经在beckend中指定fieldname是'file'，所以当您将图像发送到后端时，您需要在前端指定相同的名称'file'。

或者，您可以将后端代码从upload.single('file')更改为upload.any()。