I'm using summernote for my text editor. I was making image upload function by using multer. This is my summernote function.
onImageUpload : function(files, editor, welEditable){
// 파일 업로드(다중업로드를 위해 반복문 사용)
for (var i = files.length - 1; i >= 0; i--) {
sendFile(files[i], editor, welEditable);
}
}
and this is sendFile function
function sendFile(file, editor, welEditable){
console.log(file)
data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: "POST",
url: "/post/img",
cache: false,
contentType: false,
processData: false,
success: function(url) {
console.log(url)
editor.insertImage(welEditable, url);
}
});
}
Console shows file data normally, but url: "/post/img" doesn't work well
Just in case, my post/img router code is like
router.post("/img", upload.array("note-dialog-image-file-16755274670761", 4), (req, res) => {
console.log("파일 이름 : ", req.files);
let urlArr = new Array();
for (let i = 0; i < req.files.length; i++) {
urlArr.push(`/img/${req.files[i].filename}`);
console.log(urlArr[i]);
}
let jsonUrl = JSON.stringify(urlArr);
res.json(jsonUrl);
});
In the multer
middleware definition change the field name
router.post("/img", upload.array("note_dialog_image_file"), (req, res) => {
console.log("파일 이름 : ", req.files);
let urlArr = new Array();
for (let i = 0; i < req.files.length; i++) {
urlArr.push(`/img/${req.files[i].filename}`);
console.log(urlArr[i]);
}
let jsonUrl = JSON.stringify(urlArr);
res.json(jsonUrl);
});
and in the UI the FormData
has to be changed, so that the file
is pointed with correct field name
data = new FormData();
data.append("note_dialog_image_file", file);