【问题标题】:Multipart form data post method using express js使用express js的多部分表单数据发布方法
【发布时间】:2018-08-10 13:37:45
【问题描述】:

我尝试将表单数据发布到我的 express js 服务器端。这是我的pug 文件

form(action="/profile" method="post" enctype="multipart/form-data")
 input(type="file" accept="image/*" name="profileimage")
 input(type="text" name="username")
 input(type="submit" value="Upload")

之后,我尝试在服务器端 js 中使用req.body 记录帖子数据,如下所示。那是我的profile.js

router.post('/', function (req, res) {
  console.log('Body- ' + JSON.stringify(req.body));
});

这是我的控制台结果 body- {}

如果我在没有enctype="multipart/form-data" 的情况下发帖,比如form(action="/profile" method="post"),我可以从控制台结果中获取帖子数据。

【问题讨论】:

标签: javascript express pug multipartform-data


【解决方案1】:

express-formidable 模块我认为最适合将发布数据发送到服务器。 使用以下命令安装 express-formidable npm install express-formidable 下面是一个示例代码示例

let express = require('express');
let app = express();
let formidable = require('express-formidable');
let path = require('path');

app.use(formidable({
  encoding: 'utf-8',
  uploadDir: path.join(__dirname, 'uploads'),
  multiples: true,
  keepExtensions: true// req.files to be arrays of files
}));

app.post('/uploads',function(req,res){
  console.log('Files '+JSON.stringify(req.files));// contains data about file fields
  console.log('Fields '+JSON.stringify(req.fields));//contains data about non-file fields
});

您必须安装 path 模块才能使此代码使用以下命令 npm install path 在您的项目根目录中创建一个文件夹 uploads。所有与文件相关的数据都将在req.files 中,非文件数据将在req.fields 中我已经将它与ejs 模板引擎一起使用,它与pug 一样工作。点击This Link了解更多关于express-formidable的信息

【讨论】:

    【解决方案2】:

    您需要使用中间件来处理多部分表单数据,我认为最著名的一个是 multer

    你可以在这里找到它:https://github.com/expressjs/multer

    使用它:

    1. 首先在你的根项目中使用npm install --save multer将它添加到你的模块中

    2. 然后将其导入你的.js文件var multer = require('multer');

    3. 通过在multer 构造函数中设置dest 参数来选择您的上传目录:var upload = multer({ dest: 'uploads/' });

    4. 现在只需将其作为中间件传递到您的 POST 函数中,如下所示:

      router.post('/', upload, function (req, res) {
        console.log('Body- ' + JSON.stringify(req.body));
      });
      

    别忘了阅读他们的 github 仓库中的文档。

    【讨论】:

    • 感谢@Atef,但这会将数据拆分为 req.file 和 req.body。请问有没有办法在一个formData中拥有所有内容。在 req.body 中,以便我可以将数据原样发送到另一个 api。
    • @Vixson 我遇到了同样的情况,我建议使用formidable,因为它有一个更简单的处理程序并且不会拆分为 req.file 和 req.body。它的大小也是multer 的 4 倍,但仍然很轻 IMO
    猜你喜欢
    • 2014-01-20
    • 1970-01-01
    • 2021-05-02
    • 2014-08-06
    • 2022-11-11
    • 2016-11-08
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多