首页 > 解决方案 > 如何让 multer 正确解析使用表单数据发送的客户端请求?

问题描述

我想将数据从客户端传输到他们都使用的服务器计算机Node.js。在客户端,我正在使用库axiosform-data. 在我正在使用的服务器expressmulter...

我正在使用的客户端代码如下:

const FormData = require('form-data');
const axios = require('axios');

let form = new FormData();
form.append("user", "someuser");

axios({
    method: 'post',
    url: 'http://localhost:9996/data',
    data: form
})
.then(function (response) {
     console.log(response.status);
})
.catch(function (response) {
     console.log(response.status);
});

服务器代码如下:

const express = require('express')
const bodyParser = require('body-parser');
const multer  = require('multer')

const app = express();
const upload = multer();
app.use(bodyParser.urlencoded({extended: true}));

app.post('/data', upload.none(), function (req, res, next) {
    console.log(req.body);
    res.sendStatus(200)
})

const port = 9996;
app.listen(port, () => {
        console.log(`running on port ${port}`)
})
.on('error', function(err) {
        console.log('stopped')
})

这段代码是有效的,我设法将form JSON我在客户端上创建的代码作为服务器上的请求消息。但是,我req.body在服务器上的输出如下:

{ '----------------------------926328179431047129531240\r\nContent-Disposition: form-data; name':
   '"user"\r\n\r\nsomeuser\r\n----------------------------926328179431047129531240--\r\n' }

此输出没有像我预期的那样格式化为 JSON 对象。不是应该解析upload.none()为JSON的参数吗?有谁知道我在这里做错了什么以及是否需要更改任何其他参数才能使 req.body 上的输出格式化为 JSON 对象?multerreq.body


观察: 我知道如果我手动创建这个 JSON,const form = {"user":"someuser"}我会将输出作为对象放在req.body服务器上。但是,我之所以使用它,是form-data因为在我的原始代码中,我计划在客户端读取一个巨大的文件并createReadStream在服务器上写入它createWriteStream,而该库form-data是我发现的axios支持数据流的解决方案。

标签: node.jsexpressaxiosmulterform-data

解决方案


您看到的原因是仅在header 设置multer 为时解析请求content-typemultipart/form-data。您没有设置请求标头,因此使用 发送请求application/x-www-form-urlencodedmulter忽略它并body-parser改为进行解析。

要修复它,请在您的请求中设置标题,如下所示:

const FormData = require("form-data");
const axios = require("axios");

let form = new FormData();
form.append("user", "someuser");
// form.append("my_buffer", Buffer.alloc(10)); // or actual image

axios({
  method: "post",
  url: "http://localhost:8080/data",
  data: form,
  headers: form.getHeaders()
})
  .then(function(response) {
    console.log(response.status);
  })
  .catch(function(response) {
    console.log(response.status);
  });


推荐阅读