时间戳

首页 > 解决方案 > node express multer fast-csv pug 文件上传

express - node express multer fast-csv pug 文件上传

问题描述

我尝试使用 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});
    }
  });
})

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

{success : "文件上传成功。", status : 200}

作为其他元素（链接点击）的示例，消息通过此类 javascript 显示：

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

我尝试使用纯 javascript 来解决默认表单行为，但没有运气。

标签： expressuploadpugmulter

解决方案

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

如果您选择将此作为您无法使用的表单提交res.json，您需要切换到res.render或res.redirect改为再次呈现该页面。您正在确切地看到您告诉 node/express 做什么res.json- JSON 输出。渲染或重定向是您想要在此处执行的操作。

这是关于表单的 MDN入门，也是express.js 的特定教程。

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

MDN 有一本很棒的 AJAX 入门书，可以帮助您从那里开始。如果您要走这条路，还请确保您阅读了restful API 设计。

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

推荐阅读