Пустое тело запроса Nodejs из POST с данными формы

У меня есть фото-приложение (React Native), которое пытается отправить POST-запрос в конечную точку nodejs express с фотографией и некоторыми метаданными. Приложение узла загружает фотографию в s3.

Используя multer, биты photo + 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);

person user2755635    schedule 03.02.2018    source источник


Ответы (3)


Похоже, вы забыли настроить приложение для анализа данных, отправляемых как 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!')
});

При такой настройке ваш код должен работать должным образом.

person Ivan Vasiljevic    schedule 04.02.2018
comment
Очень признателен. Я обновил, как вы предложили, но, к сожалению, все равно не повезло. - person user2755635; 06.02.2018

попробуйте удалить 'Content-Type': 'multipart/form-data'.

тип multipart/form-data требует установки boundaries.

Установка заголовка Content-Type переопределяет часть boundary, которая должна автоматически создаваться браузером.

person jujiyangasli    schedule 04.02.2018
comment
Спасибо. Обновлено в соответствии с вашим предложением, и, к сожалению, все еще не повезло. - person user2755635; 06.02.2018

Исправление найдено здесь. Как я подозревал, это не было проблемой с узлом или мультером. Я неправильно форматировал данные формы.

Должно быть:

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