1
votes

Axios dans l'application React. La publication d'une image avec des données de formulaire envoie une demande avec un corps vide

J'essaye d'envoyer un fichier image à mon API backend. Last fonctionne bien avec Postman. Le problème n'est pas avec l'image, je ne peux pas envoyer de demande avec axios et les données de formulaire, pas de compteur que j'ajoute une image ou non.

Tout fonctionne bien avec fetch. Il a fallu du temps pour comprendre que l'extraction ne nécessite aucun type de contenu et se génère automatiquement en multipart / form-data avec une limite droite.

Comme écrit, axios devrait faire la même chose que fetch, mais il ne génère ni ne modifie son type de contenu. Passer l'en-tête 'content-type': 'multipart / form-data ne fait pas l'affaire bien sûr. Lorsque je ne définit pas le type de contenu, il suffit d'utiliser application / json . Je n'ai rien trouvé de tel dans la documentation. Partout où cela est dit, axios devrait créer automatiquement un en-tête de type de contenu.

Ma version axios est 0.18.0 . Voici le code, ça ne peut pas être plus simple =)

axios
    .post(url, payload)

reactjs axios header

0 commentaires

3 Réponses :

0
votes

       const formData = new FormData();
       
       formData.append('image', image); // your image file
       formData.append('description','this is optional description');

        Axios.post(`your url`, {body:formData}, {
        headers: {
            'content-type': 'multipart/form-data'
        }
    })

Can you please try this code once ?

0 commentaires

0
votes

Vous pouvez essayer comme ceci:

axios({
    method: 'post',
    url: 'myurl',
    data: bodyFormData,
    headers: {'Content-Type': 'multipart/form-data' }
    })
    .then(function (response) {
        //handle success
        console.log(response);
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    });

3 commentaires

Merci d'avoir essayé, mais cela n'a pas fonctionné. Même corps vide.

Pouvez-vous publier votre URL et votre charge utile réelles que vous envoyez ou peut-être la demande du facteur qui fonctionne bien

Je peux, mais c'est juste une URL avec des données de formulaire qui ne contient qu'une image. Cela n'aidera pas. J'ai également mentionné que la même logique avec la demande de récupération fonctionnait. C'est un problème avec les en-têtes de type contenu. Comme je le vois maintenant, axios se trouve son type de contenu par défaut, c'est pourquoi le code ne fonctionne pas. J'ai juste besoin de comprendre comment il définit cet en-tête et où.

1
votes

####### UPDATE #######

Il s'est avéré que le problème venait de l'intercepteur axios. Si vous n'utilisez pas d'intercepteurs, vous n'aurez pas ce problème. Ainsi, lorsque j'ai créé une nouvelle instance et supprimé tous les en-têtes, aucun intercepteur n'a été appelé, c'est pourquoi mon code a fonctionné. Mais permettez-moi d'apporter plus de détails pour aider les autres à éviter cette douleur. L'intercepteur a une fonction transformRequest là où cette partie de code existe

let axiosInstance = axios.create();

delete axiosInstance.defaults.headers;

où la fonction setContentTypeIfUnset est

function setContentTypeIfUnset(headers, value) {
    if (!utils.isUndefined(headers) && utils.isUndefined(headers['Content-Type'])) {
        headers['Content-Type'] = value;
    }
}

Donc, si votre objet a des en-têtes non définis, vous passerez également cette situation. Mais dans mon cas, même après avoir supprimé tous les en-têtes, je dois passer un en-tête à mon application. Et en le définissant, l'intercepteur appelle cette fonction transfromRequest qui ajoute cet en-tête à ma requête formdata . J'espère que dans les prochaines versions, axios résoudra ce problème.

####### ANSWER #######

Comme je l'ai deviné, en quelque sorte axios dans mon projet définir sa valeur par défaut pour le type de contenu d'en-tête et même le définir comme 'content-type': undefined n'a pas écrasé cette valeur. Voici la solution

if (utils.isObject(data)) {
  setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
  return JSON.stringify(data);
}

Ensuite, utilisez cette instance.

J'ai passé toute la journée à trouver cette solution.

0 commentaires