La POST
requête axios atteint l'URL du contrôleur mais définit des valeurs nulles pour ma classe POJO, lorsque je passe par les outils de développement dans Chrome, la charge utile contient des données. Qu'est-ce que je fais mal?
Demande Axios POST:
var body = {
userName: 'Fred',
userEmail: '[email protected]'
}
axios({
method: 'post',
url: '/addUser',
data: body
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Réponse du navigateur:
Si je définis les en-têtes comme:
headers:{
Content-Type:'multipart/form-data'
}
La requête renvoie l'erreur
Erreur lors de la publication des données en plusieurs parties / formulaire. L'en-tête Content-Type n'a pas de limite
Si je fais la même demande dans postman, cela fonctionne bien et définit les valeurs de ma classe POJO.
Quelqu'un peut-il expliquer comment définir une limite ou comment envoyer des données de formulaire en utilisant axios.
la source
set
ne pas travailler{ method: 'post', url: 'myurl', data: bodyFormData, headers: {'Content-Type': 'multipart/form-data' } }
Découvrez la chaîne de requête .
Vous pouvez l'utiliser comme suit:
la source
Dans mon cas, j'ai dû ajouter la limite à l'en- tête comme suit:
Cette solution est également utile si vous travaillez avec React Native.
la source
FormData._boundary
n'est pas défini dans Chrome 76 et Firefox 67, et axios supprime quand même l'en-tête Content-Type , cela ne devrait donc pas avoir d'effet.Télécharger (plusieurs) fichiers binaires
Node.js
Les choses se compliquent lorsque vous souhaitez publier des fichiers via
multipart/form-data
, en particulier plusieurs fichiers binaires. Voici un exemple de travail:headers: {'Content-Type': 'multipart/form-data' }
je préfèreheaders: formData.getHeaders()
async
etawait
au - dessus, vous pouvez les changer en simples déclarations Promise si vous ne les aimez pasContenu nouvellement ajouté ci-dessous:
Navigateur
Le navigateur
FormData
est différent du package NPM 'form-data'. Le code suivant fonctionne pour moi dans le navigateur:HTML:
JavaScript:
la source
concat-stream
,async
etawait
) pour le téléchargement de fichiers multiples en utilisantfor(var x = 0; x<this.state.files.length; x++) { formData.append('files[]', this.state.files[x]) }
afin que je puisse soumettre en utilisantaxios.post(url, formData, config)
Encore plus simple:
la source
Utilisation du format application / x-www-form-urlencoded dans axios
Navigateur
Dans un navigateur, vous pouvez utiliser l'API URLSearchParams comme suit:
Notez que URLSearchParams n'est pas pris en charge par tous les navigateurs (voir caniuse.com), mais un polyfill est disponible (assurez-vous de polyfill l'environnement global).
Vous pouvez également encoder des données à l'aide de la bibliothèque qs:
Ou d'une autre manière (ES6),
la source
2020 ES6 façon de faire
Ayant le formulaire en html, j'ai lié des données comme ceci:
LES DONNÉES:
onSubmit:
la source
La méthode ci-dessus a fonctionné pour moi, mais comme c'était quelque chose dont j'avais souvent besoin, j'ai utilisé une méthode de base pour les objets plats. Remarque, j'utilisais également Vue et non REACT
Ce qui a fonctionné pour moi jusqu'à ce que je tombe sur des structures de données plus complexes avec des objets et des fichiers imbriqués qui ont ensuite permis aux éléments suivants
la source
objectToFormData
pourpackageData
ou vice versala source