node.jsexpressmulterinternal-server-errorsummernote

nodejs router Internal server error in summernote


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

error message

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

Solution

  • 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);