javascript - 如何将图像上传到 ExpressJS 服务器

Question

我觉得我在试图解决这个问题时失去了理智。我是一名相当新的 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>";

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

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

    console.log(req.file);

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

问题在于，可以预见的是，此实现会将用户从页面重定向到正在返回的 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;
}

如果两个问题的答案都是“否”，那么这通常是如何完成的？有没有什么地方可以让我详细了解这个过程是如何运作的？看起来很常见。

Answer 1

我认为this这就是您正在寻找的。防止表单重新加载页面或将您带到任何地方。