Comment faites-vous envoyer des images de node js avec Axios?
Est-il un moyen d'envoyer un tableau d'images (ou une image) sur le nœud à l'aide d'axios?
l'axios code que j'utilise(je suis en utilisant réagir js sur le front-end):
onFormSubmit(event){
event.preventDefault();
let payload = this.state;
console.log("in onFormSubmit!!! with state: ", this.state, "and payload: ", payload);
axios.post('/api/art', payload)
.then(function(response){
console.log('saved successfully')
});
Les recherches que j'ai fait suggère que peut-être il n'y a pas un moyen d'envoyer des fichiers image vers un nœud à l'aide d'axios, mais cela me semble étrange. Est-il un moyen?
OriginalL'auteur J. Bones | 2016-09-23
Vous devez vous connecter pour publier un commentaire.
Ici est la façon dont j'ai obtenu cela fonctionne correctement. J'ai eu à faire usage d'un objet appelé FormData. J'ai utilisé l'importation:
De cours avant cette importation, j'ai dû courir le npm install:
Une fois que j'ai fait tout cela, voici comment je l'ai utilisé dans mon action:
Les pièces importantes à noter ici sont:
Espère que cette aide, ce éclairci tous les problèmes que j'ai eu avec essayez d'envoyer une image à un serveur principal (dans mon cas, un repos de service par le biais d'un appel post).
OriginalL'auteur Cmontalvo80
Oui vous avez défini le type de contenu dans votre axios demande:
où
imageFile
est un fichier HTML5 (https://developer.mozilla.org/en/docs/Web/API/File) qui doit être une image dans votre cas.OriginalL'auteur Yangshun Tay
Voici comment j'ai mis en place:
Sur le nœud serveur js assurez-vous d'utiliser certains middle-ware qui gère multipart demandes. J'ai utilisé multer.
Voici mes résultats sur le point de terminaison:
OriginalL'auteur Volodymyr Synytskyi
Je dirais au lieu de le faire manuellement, vous pouvez utiliser une bibliothèque appelée réagir-dropzone pour cela . Donc, fondamentalement, ce que vous devez faire est de :-
Vous pouvez vérifier ici pour repo git. J'ai mis en œuvre ce dans django, mais je ne pense pas que backend doit être un problème, vous pouvez utiliser un nœud
essayez d'ouvrir une session req.fichiers et assurez-vous d'utiliser certains middle-ware qui gère multipart demandes (multer)
OriginalL'auteur Harkirat Saluja
Avec HTML5, vous pouvez utiliser
FormData()
de construire un ensemble de paires clé/valeur qui représente les champs de formulaire et de leurs valeurs que vous souhaitez envoyer. Dans la plupart des cas, un utilisateur de la soumission d'un formulaire, la méthode à utiliser estFormData.set()
qui peut être manipulé dans ses 2 formes:Une fois que vous construisez votre objet de données, n'oubliez pas de spécifier le type de contenu de type multipart en-tête pour votre requête HTTP POST de sorte que vous pouvez envoyer le fichier sur votre serveur.
Ci-dessous est un résumé de ce que j'ai dit:
OriginalL'auteur Billal Begueradj