Javascript 如何将图像上载到ExpressJS服务器

我觉得我在试图解决这个问题时失去了理智。我是一个相当新的web开发人员（这就像我的第三个真实项目），我正在尝试创建一个带有图像上传功能的单页应用程序。我一直在使用AJAX进行前端/后端通信，所以我的第一个问题是是否可以使用AJAX发送图像？我听过一些人说是，也有人说不是，但没有一大堆细节说明原因，或者如果是，如何

我一直在研究其他方法来实现这一点，但发现实际上包含足够细节/上下文的方法很少。我已经设法使用基本HTML表单和multer npm包获得了一些技术上可行的东西，如下所示：

editModal.innerHTML =   "<img class='thumbnail' src='" + response[0].image_loc + "'><br>" +
                        "<form method='post' action='/upload' enctype='multipart/form-data' id='edit_post_form'>" +
                        "   Select a new thumbnail<input type='file' id='post_thumbnail' name='file'><br>" +
                        "   Title<input type='text' id='post_title' name='title' value='" + response[0].title + "'><br>" +
                        "   Description<input type='text' id='post_desc' name='description' value='" + response[0].description + "'><br>" +
                        "   Price<input type='text' id='post_price' name='price' value='" + response[0].price + "'><br>" +
                        "   <button type='submit' class='submit' id='submit_post_edit'>Submit</button>" +
                        "   <button type='button' class='cancel' id='cancel_post_edit'>Cancel</button>" +
                        "</form>";

问题在于，可以预见，这种实现会将用户从页面重定向到返回的JSON文件。这有什么办法吗？我看到一些人建议编写一个返回false的.onsubmit函数，并使用某种JQuery在该函数中发送文件。我有一个.onsubmit函数，我正在使用它将文本字段直接发送到数据库，我尝试从中返回false，但它仍然重定向，所以我也感觉被卡住了

form.onsubmit = function() {

    var title = document.getElementById("post_title").value;
    var description = document.getElementById("post_desc").value;
    var price = document.getElementById("post_price").value;

    $.ajax({
        url: "DBRequest",
        type: "POST",
        async: false,
        data: { data:
                JSON.stringify(
                { query: "UPDATE post SET title = $1, description = $2, price = $3 WHERE pid = $4",
                  vars: [title, description, price, postID],
                  type: "update"})}
    }).done(function(response) {
        document.body.removeChild(document.getElementById("post_edit_modal"));
        populate();
    });

    return false;
}

---

如果这两个问题的答案都是否定的，那么通常是如何做到的？有没有什么地方可以让我详细了解这个过程的工作原理？这似乎很常见。

我想这就是你要找的。防止表单重新加载页面或将您带到任何地方。

好的，对于其他任何有此问题的人，我使用AJAX成功地提出了一个通用解决方案：

HTML:

服务器端JS：

let multer = require("multer");

const upload = multer({ dest: "/Images" });

app.post('/upload', upload.single("file"), function(req, res) {

    const tempPath = req.file.path;
    const targetPath = path.join(__dirname, "./Assets/Images/" + req.file.originalname);

    if (path.extname(req.file.originalname).toLowerCase() === ".png"
        || path.extname(req.file.originalname).toLowerCase() === ".jpg") {

        fs.rename(tempPath, targetPath, function(err) {

            if (err) res.status(400).send({status: "Failure: Internal server error"});
            else res.status(200).send({status: "Success"});
        });
    }
    else {
        fs.unlink(tempPath, function(err) {

            if (err) res.status(400).send({status: "Failure: Internal server error"});
            else res.status(403).send({status: "Failure: Internal server error"});
        })
    }
})

如果文件是jpg或png，则将单个文件上载到资产/图像

<input type='file' id='file' name='file'>
<button type='button' class='submit' id='submit'>Submit</button>

submit = document.getElementById("submit");

submit.onclick = function() {

    var fileData = $("#file").prop("files")[0];
    var formData = new FormData;
    formData.append("file", fileData);

    $.ajax({
        url: "upload",
        dataType: "text",
        cache: false,
        contentType: false,
        processData: false,
        data: formData,
        type: "POST",
    }).done(function(response) {
        //Handle success
    }).catch(function(err) {
        //Handle error
    });
}

let multer = require("multer");

const upload = multer({ dest: "/Images" });

app.post('/upload', upload.single("file"), function(req, res) {

    const tempPath = req.file.path;
    const targetPath = path.join(__dirname, "./Assets/Images/" + req.file.originalname);

    if (path.extname(req.file.originalname).toLowerCase() === ".png"
        || path.extname(req.file.originalname).toLowerCase() === ".jpg") {

        fs.rename(tempPath, targetPath, function(err) {

            if (err) res.status(400).send({status: "Failure: Internal server error"});
            else res.status(200).send({status: "Success"});
        });
    }
    else {
        fs.unlink(tempPath, function(err) {

            if (err) res.status(400).send({status: "Failure: Internal server error"});
            else res.status(403).send({status: "Failure: Internal server error"});
        })
    }
})