node express multer fast-csv pug 文件上传

Question

我正在尝试使用 pug、multer 和 express 上传文件。

哈巴狗的外形是这样的

form(method='POST' enctype="multipart/form-data")
    div.form-group
    input#uploaddata.form-control(type='file', name='uploaddata' )
    br
    button.btn.btn-primary(type='submit' name='uploaddata') Upload

服务器代码如下所示（断章取义）

.post('/uploaddata', function(req, res, next) {
    upload.single('uploaddata',function(err) {
    if(err){
      throw err;
      } else {
    res.json({success : "File upload sucessfully.", status : 200});
    }
  });
})

我的问题是，虽然文件上传成功，但同一页面上未显示成功消息，即：加载新页面显示

{成功："File upload sucessfully."，状态：200}

作为其他元素（[=30=] 点击次数）的示例，该消息通过 javascript 显示：

$("#importdata").on('click', function(){
        $.get( "/import", function( data ) {
            $("#message").show().html(data['success']);
        });
    });

我尝试做一个纯粹的 javascript 来解决默认表单行为，但没有成功。

Answer 1

您的问题与混合表单提交和 AJAX 概念有关。具体来说，您正在提交一个表单，然后返回一个适合 AJAX API 的值。您需要选择其中之一才能正常工作。

如果您选择将此作为无法使用 res.json 的表单提交，您需要切换到 res.render 或 res.redirect 以重新呈现页面。您看到的正是您告诉 node/express 对 res.json - JSON 输出所做的事情。渲染或重定向是你想在这里做的。

这是 MDN primer on forms and also a tutorial specific to express.js。

或者，如果您选择使用 AJAX API 来处理此问题，您需要在浏览器中使用 jquery、fetch、axios 或类似工具来发送请求，并且处理响应。这不会导致页面重新加载，但您确实需要以某种方式处理响应并修改页面，否则用户只会坐在那里想知道发生了什么。

MDN 有一个 great primer on AJAX that will help you get started there. If you are going down this path also make sure you read up on restful API design.

这两种方法本质上都不是更好的策略，这两种方法都用于大规模生产应用程序。但是，您确实需要选择一个或另一个，而不是像上面那样混合使用它们。

node express multer fast-csv pug 文件上传

node express multer fast-csv pug file upload

upload

express

multer

pug