Question

我试图使用哈巴狗，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});
    }
  });
})

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

{成功：“文件上传成功。”，状态：200}

作为其他元素（链接点击）的示例，该消息通过此类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来重新呈现页面。您正在确切地知道要告诉节点/表达式如何处理res.json-JSON输出。您要在此处进行渲染或重定向。

以下是MDN primer on forms和a tutorial specific to express.js。

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

MDN具有great primer on AJAX，可帮助您从那里开始。如果您走这条路，请确保您已阅读restful API design。

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

节点express multer fast-csv pug文件上传

1 个答案: