Bonjour ! 
Je me heurte à un problème avec Express et Nuxt. J’ai un formulaire sur Nuxt qui est très simple : Un seul champ, celui du nom d’utilisateur.
Lorsque je valide le formulaire, ça fait une requête de type POST avec axios sur l’API Express.
Avec Express, j’utilise body-parser pour pouvoir récupérer ce champ dans la variable req.body mais celle-ci est vide… par contre, lorsque je n’utilise pas FormData avec Nuxt, ça marche bien. Le problème viens du FormData, mais je ne comprend pas pourquoi. Quelqu’un peut m’aider ?
Frontend (Nuxt)
<template>
<div>
<v-alert
v-if="success"
type="success"
>
{{ success }}
</v-alert>
<v-alert
v-if="error"
type="error"
>
{{ error }}
</v-alert>
<v-form>
<v-container>
<v-row>
<v-col
cols="12"
md="6"
>
<v-text-field
v-model="username"
label="Username"
required
/>
</v-col>
<v-col
cols="12"
md="6"
>
<v-btn
color="success"
@click="submitForm()"
>
Envoyer
</v-btn>
</v-col>
</v-row>
</v-container>
</v-form>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Upload',
data () {
return {
username: 'test',
success: '',
error: ''
}
},
methods: {
submitForm () {
const formData = new FormData()
formData.append('username', this.username)
axios.post('/api/upload', formData).then((response) => {
this.success = response.data.message
}).catch((error) => {
this.error = error
})
}
}
}
</script>
Backend (Express)
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))
app.post('/upload', (req, res, next) => {
res.status(200).json({ message: req.body })
})
module.exports = app
Dans ce code, la variable req.body est vide.
En revanche, si je n’utilise pas FormData, comme ceci, ça fonctionne bien :
Frontend (Nuxt)
submitForm () {
axios.post('/api/upload', {
username: this.username
}).then((response) => {
this.success = response.data.message
}).catch((error) => {
this.error = error
})
}
Le problème, c’est que je suis obligé d’utiliser FormData, puisque je dois faire un upload d’image par la suite. A moins qu’il y a un moyen de faire un upload avec Multer sans utiliser FormData ?
Merci !
