web-dev-qa-db-fra.com

Faire un axios POST requête avec multipart/form-data, via React Native Debugger

J'essaie de télécharger un fichier de React Native sur mon serveur. Cependant, je ne peux pas définir l'en-tête 'Content-Type' sur multipart/form-data.

Voici ma demande simple:

axios({
  uri: 'http://localhost:3000',
  method: 'POST',
  data: formData,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'multipart/form-data'
  }
});

J'utilise le débogueur natif de React pour surveiller les requêtes réseau. 

Lorsque je vois ma demande de réseau dans le débogueur, je vois ceci:

'Content-Type': 'text/plain;charset=UTF-8'

et la charge utile de la demande est simplement [object Object]

Agent utilisateur: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) ReactNativeDebugger/0.7.13 Chrome/58.0.3029.110 Electron/1.7.9 Safari/537.36

Si je ne peux pas faire cela avec le débogueur natif de React, quelqu'un peut-il suggérer des étapes pour tester via Expo? 

multipartform-dataaxios
3
Dan

À l'aide de la dernière version d'Axios (0.17.1), vous créez une requête HTTP avec 'Content-Type': 'multipart/form-data' dans l'en-tête comme suit:

const formData = new FormData();
formData.append('action', 'ADD');
formData.append('param', 0);
formData.append('secondParam', 0);
formData.append('file', new Blob(['test payload'], { type: 'text/csv' }));
axios({
  url: 'http://localhost:5000/api/hello',
  method: 'POST',
  data: formData,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'multipart/form-data'
  }
})

Deux choses: j'utilise url, pas uri. En outre, veuillez insérer vos propres données de formulaire et votre URL. En inspectant la demande qui a été répondue avec succès, voici ce que je reçois pour l'en-tête de la demande:

 enter image description here

3
JMA

Vous pouvez faire simplement: axios.defaults.headers.common['Content-Type'] = 'multipart/form-data; boundary=someArbitraryUniqueString';

Cela définira vos en-têtes à coup sûr. Cependant, je me suis battu avec les données de formulaire dans React Native pendant un jour et sans succès. Après quelques expériences expérimentales, j'ai découvert que tout fonctionne sans débogueur . Je ne sais pas pourquoi mais avec le débogueur, j'ai envoyé un corps vide au serveur.

Quoi de plus Je n'avais pas besoin de définir les en-têtes , comme c'est votre question dans ce post.

1
Marcin Sadowski