1

Estou tentando enviar um FormData() para o backend via Fetch API, porém não consigo ler os inputs do form no NODEJS. Aliás, o req.body está vazio.

Estou usando o body-parser e express.

Backend:

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

app.use(express.static('./static/'));

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

app.post('/teste', (req,res) => {
    console.log(req.body);
    res.send('teste');
});

app.get('/', (req,res) => {
    res.sendFile(__dirname + '/index.html');
});

app.listen(3000, () => {
    console.log('rodando...');
});

module.exports = () => app;

Frontend:

window.onload = () => {
    var form = document.getElementById('myForm');

    form.addEventListener('submit', (evt) => {
        evt.preventDefault();
        var myHeader = new Headers();
        // myHeader.append('Content-type', 'application/x-www-form-urlencoded');
        // myHeader.append('Content-type', 'multipart/form-data');
        
        var myFormData = new FormData(form);
        fetch('/teste', {
            method: 'POST',
            headers: myHeader,
            body: myFormData
        }).then((retorno) => {
            console.log(retorno);
        }).catch();
    });
}

Consigo ler algo no req.body somente quando o Content-type está igual a 'application/x-www-form-urlencoded'. No caso é isso que aparece na console.log():

{
  '------WebKitFormBoundaryUlQT9OMwOZvpVQ0U\r\nContent-Disposition: form-data; name': '"nome"\r\n' +
    '\r\n' +
    'digitando algo \r\n' +
    '------WebKitFormBoundaryUlQT9OMwOZvpVQ0U\r\n' +
    'Content-Disposition: form-data; name="idade"\r\n' +
    '\r\n' +
    'ABACATE\r\n' +
    '------WebKitFormBoundaryUlQT9OMwOZvpVQ0U--\r\n'
}

1 Resposta 1

2

Você vai precisar de algum middleware para processar multipart/formdata na rota do nodejs. Multer é a opção mais utilizada:

https://github.com/expressjs/multer

Na própria doc tem vários exemplos...mas vou adicionar um aqui para que você possa ter como referência:

<form action="/profile" method="post" enctype="multipart/form-data">
    <input type="file" name="avatar" />
</form>

Na rota do node.js:

var express = require('express')
var multer  = require('multer')
var upload = multer({ dest: 'uploads/' })

var app = express()

app.post('/profile', upload.single('avatar'), function (req, res, next) {
  // req.file is the `avatar` file
  // req.body will hold the text fields, if there were any
})

app.post('/photos/upload', upload.array('photos', 12), function (req, res, next) {
  // req.files is array of `photos` files
  // req.body will contain the text fields, if there were any
})

var cpUpload = upload.fields([{ name: 'avatar', maxCount: 1 }, { name: 'gallery', maxCount: 8 }])
app.post('/cool-profile', cpUpload, function (req, res, next) {
  // req.files is an object (String -> Array) where fieldname is the key, and the value is array of files
  //
  // e.g.
  //  req.files['avatar'][0] -> File
  //  req.files['gallery'] -> Array
  //
  // req.body will contain the text fields, if there were any
})

Agora um plus: eu já usei o formdable para processar uploads de arquivos. https://www.npmjs.com/package/formidable

var formidable = require('formidable')
[...]
var form = new formidable.IncomingForm();
form.parse(req, function (err, fields, files) {}
[...]

Solução

Não testei localmente, mas no seu código eu acredito que isso possa resolver (o trecho está na linha 4 e 11):

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

app.use(express.static('./static/'));

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

app.post('/teste', upload.none(), (req,res) => {
    console.log(req.body); // req.body contém text fields
    res.send('teste');
});

app.get('/', (req,res) => {
    res.sendFile(__dirname + '/index.html');
});

app.listen(3000, () => {
    console.log('rodando...');
});

module.exports = () => app;
1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .