Nodejs 来自表单数据 POST 的空请求正文答案

【问题标题】：Nodejs empty request body from form-data POSTNodejs 来自表单数据 POST 的空请求正文
【发布时间】：2018-07-14 03:07:07
【问题描述】：

我有一个照片应用程序 (React Native) 正在尝试向 nodejs express 端点发出 POST 请求，其中包含照片和一些元数据。节点应用将照片上传到s3。

使用 multer，照片 + s3 位可以流畅地工作，但我似乎无法访问元数据。它是空的。

客户端：React Native

var formData = new FormData();

formData.append('photo', {
  uri: this.state.photo.uri,
  name: 'image.jpg',
  type: 'image/jpeg',
});

formData.append('meta', {
  title: "the best title",
  lat: this.state.lat,
  long: this.state.long
});

const config = {
  method: 'POST',
  body: formData,
  headers: {
    'Accept': 'application/json',
  }
}

console.log(config) // I see both photo and meta in the formData
fetch("http://localhost:5001/upload", config)
  .then((responseData) => {
    console.log('awesome, we did it');
  })
  .catch(err => {
    console.log(err);
  });
}

服务器：Nodejs + multer + s3

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

var AWS = require('aws-sdk');
var fs =  require('fs');

var s3 = new AWS.S3();
var myBucket = 'my-bucket';
var myKey = 'jpeg';

var upload = multer({
  storage: multerS3({
    s3: s3,
    bucket: myBucket,
    key: function (req, file, cb) {
      console.log(file);
      cb(null, file.originalname);
    }
  })
});

const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: false
}));

app.post('/upload', upload.array('photo', 1), (request, response, next) => {
  // The upload to s3 works fine
  console.log(request.body); // I cannot see anything in the body, I only see { meta: '' }
  response.send('uploaded!')
});

exports.app = functions.https.onRequest(app);

【问题讨论】：

标签： node.js react-native multer multer-s3

【解决方案1】：

您似乎忘记设置应用程序来解析以form-data 发送的数据。如果您查看bodyparser 文档，您会发现您必须启用form-data 解析：

app.use(bodyParser.urlencoded({
    extended: false
}));

所以配置应该是这样的：

const app = express();
app.use(bodyParser.urlencoded({
        extended: false
}));
app.use(bodyParser.json());

app.post('/upload', upload.array('photo', 1), (request, response, next) => 
{
  // The upload to s3 works fine
  console.log(request.body); // I cannot see anything in the body, I only see { meta: '' }
  response.send('uploaded!')
});

通过此设置，您的代码应该可以按预期工作。

【讨论】：

非常感谢。我按照您的建议进行了更新，但不幸的是仍然没有运气。

【解决方案2】：

尝试删除'Content-Type': 'multipart/form-data'。

multipart/form-data 类型需要设置 boundaries。

您设置 Content-Type 标头会覆盖 boundary 部分，该部分应由浏览器自动创建。

【讨论】：

谢谢。更新到您的建议，不幸的是仍然没有运气。

【解决方案3】：

已找到 here 的修复程序。正如我所怀疑的，这不是 node 或 multer 的问题。我错误地格式化了表单数据。

需要：

formData.append('meta.title', "the best title")
formData.append('meta.lat', this.state.latitude)
formData.append('meta.long', this.state.longitude)

【讨论】：