Axios: Axios n'envoie pas de données de formulaire en réactif natif

Créé le 25 janv. 2018  ·  46Commentaires  ·  Source: axios/axios

J'ai essayé d'envoyer des données de formulaire avec axios mais je ne peux pas, dans les outils de développement Chrome, aucun contenu n'apparaît dans la demande. Faire une même demande via le facteur la réponse de l'API normalement.
js (newData) => { const data = new FormData(); data.append('name', 'raphael'); data.append('file', { uri: newData.image.path, type: 'image/jpeg', name: 'teste' }); return axios.post(`${constants.development.URL_API}/file`, data, headers: { 'Content-Type': 'multipart/form-data', }, })`

Commentaire le plus utile

Ce bug se produit toujours avec les derniers axios, pourquoi cela a-t-il été fermé ?

Tous les 46 commentaires

@corujoraphael Par curiosité, cette demande fonctionnait-elle plus tôt ?

@corujoraphael Je ne suis pas sûr que votre code fonctionne tel

(newData) => {
  const data = new FormData();
  data.append('name', 'raphael');
  data.append('file', {
    uri: newData.image.path,
    type: 'image/jpeg',
    name: 'teste'
  });

  return axios.post(
    `${constants.development.URL_API}/file`,
    data, 
    { 
      headers: {
        'Content-Type': 'multipart/form-data',
      }
    },
  )
}

Étant donné que ce problème n'a pas reçu de réponse et que cela ne ressemble pas à un bogue Axios sur la base des informations dont nous disposons, je ferme ce problème.

Si vous avez besoin d'aide supplémentaire pour déboguer votre code, veuillez publier sur Stack Overflow , Gitter ou commenter à nouveau sur ce problème.

Merci!

@emilyemorehouse , j'ai rencontré le même problème en utilisant React Native FormData

let s = JSON.stringify({ uri: localUri, name: filename, type: type });
let formData = new FormData();
formData.append('ph0t0', s);

axios.post("http://10.0.1.2:8888/uploadphoto", {
        method: "POST",
        headers: {
                'Content-Type': 'multipart/form-data; charset=utf-8; boundary="another cool boundary";'
        },
        body: formData,
}).then((resp) => {
        console.log(resp);
}).catch(err => {
        console.log(err);
});

Attendez-vous à ce que certaines paires clé:valeur existent dans MultipartForm, Form ou PostForm

2018/02/20 18:25:31.740 [W] [photo.go:411] req.MultipartForm: néant
2018/02/20 18:25:31.740 [W] [photo.go:412] req.Form: map[]
2018/02/20 18:25:31.740 [W] [photo.go:413] req.
2018/02/20 18:25:31.740 [W] [photo.go:410] req: &{POST /uploadphoto/dialog/57120e8951c643ab42a8c19f/000000000000000000000001 HTTP/1.1 1 1 map[Content-Type:[application/json;charset =utf-8] User-Agent :[okhttp/3.6.0] Accept :[application/json, text/plain, / ] Content-Length :[419] Connection :[Keep-Alive] Accept-Encoding :[gzip] Cookie :[lang=zh-TW ; PVsessionID=db9a21d63b2d0ea47b68fa8755bd87e2]] 0xc420e3cb80419 [] false 10.0.1.2:8888 map[] map[]carte[] 10.0.1.3:46904 /uploadphoto/dialog/57120e8951c643ab42a8c19f/0000000000000000000000010xc420e3cb40}
2018/02/20 18:25:31.740 [E] [photo.go:425] [UploadPhotos] erreur : le type de contenu de la demande n'est pas multipart/form-data

Informations sur les versions
axios : 0,16.2
exposition : 25.0.0
réagir : 16.2.0
natif réactif : 0,52,0

Ce bug se produit toujours avec les derniers axios, pourquoi cela a-t-il été fermé ?

Si quelqu'un peut fournir un exemple reproductible, je suis heureux d'ouvrir cette sauvegarde.

@ Ernie6711, il semble que vous ayez une erreur dans votre code - je ne pense pas que vous deviez chaîner les données du fichier avant de les ajouter à vos données de formulaire. De plus, les arguments pour axios.post sont axios.post(url[, data[, config]])

Voici un exemple basé sur votre code :

const file ={ uri: localUri, name: filename, type: type};
const formData = new FormData();
formData.append('file', s);

const config = {
        headers: {
                'Content-Type': 'multipart/form-data; charset=utf-8; boundary="another cool boundary";'
        }
};

axios.post("http://10.0.1.2:8888/uploadphoto", formData, config).then((resp) => {
        console.log(resp);
}).catch(err => {
        console.log(err);
});

@emilyemorehouse s'il vous plaît vérifier les traces de wireshark. Les données sont téléchargées mais n'utilisent PAS un codage de données de formulaire approprié. L'exemple ci-dessus peut reproduire le problème. Encore une fois - la demande est envoyée avec succès mais est-elle mal codée.

POST /myserver HTTP/1.1
Content-Type: multipart/form-data

_parts=USERX%2Cusername&_parts=FILE1%2C%5Bobject%20Object%5D

J'ai un exemple de client et de serveur local pour les téléchargements de fichiers, bien qu'en dehors de l'environnement React Native, qui fonctionne et est correctement codé. L'exemple ci-dessus n'est pas vraiment reproductible car il repose sur des variables et un serveur auquel je n'ai pas accès.

Je suppose que s'il y a quelque chose d'incorrect avec le téléchargement, c'est parce que les données ajoutées à l'objet de données de formulaire ne sont pas valides.

@emilyemorehouse Les téléchargements de fichiers fonctionnent parfaitement dans un environnement de navigateur, ils échouent uniquement lors de la réaction native. Comme vous l'avez mentionné vous-même - vos tests étaient en dehors de l'environnement natif de réaction, je commencerais par là :)

Essayez un simple téléchargement de fichier dans React Native et vérifiez simplement les traces de wireshark, vous n'avez même pas besoin d'un serveur fonctionnel...

J'ai le même, Axios ne réagit pas en natif

@duongtranpyco J'ai supprimé axios de mon projet, j'ai écrit ma propre classe simple à la place, profitez-en !

PS Si vous envoyez principalement du JSON, modifiez le code. Dans mon cas, le serveur attend généralement un formulaire.

const request = async ({url, method = 'GET', params, body, responseType = 'json', headers = {}})=>{
    const escape = (data, encode = encodeURIComponent)=>Object.keys(data||{}).reduce((pairs, key)=>{
        for (let value of [].concat(data[key]))
            pairs.push([`${key}`, `${value}`]);
        return pairs;
    }, []).map(pair=>pair.map(encode).join('=')).join('&');

    if (Object.keys(params||{}).length)
        url += '?'+escape(params);
    if (method=='POST' && typeof body=='object')
    {
        if (body instanceof FormData)
            headers['Content-Type'] = 'multipart/form-data';
        else
        {
            body = escape(body);
            headers['Content-Type'] = 'application/x-www-form-urlencoded';
        }
    }
    let {statusCode, request: req} = await new Promise((resolve, reject)=>{
        let xhr = new XMLHttpRequest();
        xhr.open(method, url, true);
        xhr.withCredentials = true;
        xhr.responseType = {json: 'text'}[responseType]||responseType;
        xhr.onload = ()=>resolve({statusCode: xhr.status, request: xhr});
        xhr.onerror = ()=>reject(new TypeError('Network request failed'));
        xhr.ontimeout = ()=>reject(new TypeError('Network request timed out'));
        for (let key in headers)
            xhr.setRequestHeader(key, headers[key]);
        xhr.send(body||null);
    });
    if (statusCode<200 || statusCode>=400)
        throw new Error(`network request failed with ${statusCode}: ${url}`);
    switch(responseType)
    {
        case 'json':
            return JSON.parse(req.responseText);
        case 'text':
            return req.responseText;
        case 'request':
            return req;
    }
    return req.response;
};

request.get = (url, opt = {})=>request({...opt, url, body: null});
request.post = (url, ...args)=>request({...args[1]||{}, url, method: 'POST', body: args[0]});

Bonjour, je rencontre le même problème. Quelqu'un a-t-il trouvé une solution ?

Deuxième @giladno. Comme je vais de l'avant sur d'autres parties, j'utilise plutôt une solution de contournement : écrivez une fonction spécifique avec fetch() lors du téléchargement d'images.

Essayé auparavant et ni la chaîne des données ni des arguments n'affecte le résultat. Le serveur a reçu l'appel mais aucune donnée n'a été envoyée.

@ Ernie6711 apparemment, les en-têtes sont corrompus et c'est pourquoi le serveur ne peut pas accepter les données du formulaire. J'ai implémenté la solution de contournement avec fetch() et cela a fonctionné sans problème.

J'ai eu le problème de react-native.
Le problème ne sont pas les en-têtes.
En web on peut avoir par exemple :

let formData = new FormData()
formData.append('key', true // bool value)

mais dans React Native, la valeur de la clé doit être une chaîne.

formData.append('key', 'true')

J'ai le même problème sur React Native lorsque je publie sur une URL, comme le mentionne https://github.com/axios/axios/issues/1618 , mais personne n'a répondu, veuillez décrire dans le fichier readme de votre bibliothèque que vous n'avez pas de support pour axios sur React Native, afin que de nombreux développeurs ne perdent pas de temps..!

Vous tous, j'apprécie la direction, mais "tester simplement un téléchargement de fichier dans React Native" n'est pas si facile. Je ne travaille pas souvent dans React Native et il faudrait un certain temps pour lancer un projet avec des téléchargements de fichiers à tester.

J'ai un simple POST avec des données de formulaire qui fonctionne dans React Native :

    const formData = new FormData();
    formData.append("data", true);

    const config = {
      headers: {
        "Content-Type": "multipart/form-data; charset=utf-8;"
      }
    };

    axios.post(URL, formData, config).then(
      response => {
        console.log({ response });
      },
      error => {
        console.log({ error });
      }
    );

true est stringifié lorsqu'il est envoyé au serveur, ce qui est intéressant.

Cela dit, si quelqu'un peut fournir un exemple que je peux facilement citer, je suis heureux d'y réfléchir davantage.

@corujoraphael comment avez-vous résolu ce problème ?

J'ai ajouté un type à l'intérieur de l'objet image comme "Image.type='image/png" juste avant l'ajout et j'ai également changé le type de contenu en "Content-Type":"multipart/form-data" :

        image.type='image/png'
        formData.append("resource", image);
        return axios
          .post('yourBAckendUrl', formData, {
            headers: {
              Authorization: "yourTokenHere",
              "Content-Type": "multipart/form-data"
            }
          })

J'espère que cela aidera quelqu'un.

Je n'ai pas réussi à faire fonctionner cela aussi, j'essaie de METTRE des données multipart/form sur S3 (vidéo). L'utilisation de l'option type n'a pas aidé. L'en-tête multipart/form-data ne semble pas être dans la requête PUT :

      const data = new FormData();
      data.append('video', {
          uri: 'file:///<path_to_video_on_iphone.mov',
          type: 'video/quicktime',
          name: 'video.mov',
      });
      response = yield call(() => {
        return api.put(url, data, {
          headers: {
              'Content-Type': 'multipart/form-data',
          },
          transformRequest: [
            (data, headers) => {
                delete headers.common.Authorization;
                return data;
            }
          ]
        });
      });

Pour ce cas, utilisez fetch :D

var data = new FormData();  
data.append('my_photo', {  
  uri: filePath, // your file path string
  name: 'my_photo.jpg',
  type: 'image/jpg'
}

fetch(path, {  
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'multipart/form-data'
  },
  method: 'POST',
  body: data
});

dans la version axios 0.18.0 ayant le même problème.
axios supprime en interne l'en-tête Content-Type s'il n'y a pas de corps sur le post, put etc pour une raison quelconque lors de la création de FormData le corps reste vide.
c'est mon code :

const sendFormData = images => {
   // images is an array of base64 images (strings)
    const formData = new FormData();
    images.forEach((img, i) => {
        formData.append('file', img);
        formData.append('name', `${type}-${i + 1}`);
    });

    config.headers = {
        .'Content-Type': 'multipart/form-data'
     };

     return axios.post(`http://someurl.com/api/upload-images`, formData, config)
            .then(response => {
               // handle success
            })
            .catch(err => {
                // handle err
     });
}

Réagir version native 0.55.3
cet exemple de code ne fonctionne pas. le corps de la requête est vide et l'en-tête Content-Type est supprimé

j'ai les mêmes problèmes et mon corps lorsque je vérifie le débogage est une chaîne

screen shot 2018-10-26 at 11 12 10 am

et voici mon code

        const formData = new FormData();
        formData.append('photo', {
          uri: response.uri.replace('file://', ''),
          mineType: 'image/jpeg',
          fileType: 'image/jpg',
          type: 'image/jpg',
          name: 'test.jpg'
        });

        console.log('form data', formData);

         Axios({
           method: 'post',
           url: 'https://dev-host.luxstay.net/api/rooms/10740/photos',
           data: formData,
           headers: {
             Authorization: token,
             'Content-Type': 'multipart/form-data'
           }
         });

Mise à jour : une erreur s'est produite car l'application était en mode débogage. Quand je désactive le mode débogage, cela a fonctionné

axios a un code dans son adaptateur xhr
if (utils.isFormData(requestData)) { delete requestHeaders['Content-Type']; // Let the browser set it }
Je suppose que dans react-native, il supprime l'en-tête de type de contenu si vous envoyez des données de formulaire en plusieurs parties, même si vous les définissez dans le code .
Mais je ne sais pas si commenter la ligne résoudrait votre problème dans react-native.

dans la version axios 0.18.0 ayant le même problème.
axios supprime en interne l'en-tête Content-Type s'il n'y a pas de corps sur le post, put etc pour une raison quelconque lors de la création de FormData le corps reste vide.
c'est mon code :

const sendFormData = images => {
   // images is an array of base64 images (strings)
    const formData = new FormData();
    images.forEach((img, i) => {
        formData.append('file', img);
        formData.append('name', `${type}-${i + 1}`);
    });

    config.headers = {
        .'Content-Type': 'multipart/form-data'
     };

     return axios.post(`http://someurl.com/api/upload-images`, formData, config)
            .then(response => {
               // handle success
            })
            .catch(err => {
                // handle err
     });
}

Réagir version native 0.55.3
cet exemple de code ne fonctionne pas. le corps de la requête est vide et l'en-tête Content-Type est supprimé

screen shot 2018-10-26 at 11 12 10 am

Alors, à quoi devrait-il ressembler ? J'ai aussi un objet objet.

@tkserver c'est comme quand vous avez un objet et que vous le toString().

const a = {
  name: 'dasdasd'
}
console.log(a.toString());

@tkserver c'est comme quand vous avez un objet et que vous le toString().

const a = {
  name: 'dasdasd'
}
console.log(a.toString());

Peut-être que je n'ai pas été clair. La charge utile de la demande doit-elle afficher [objet objet] lors de la visualisation des en-têtes ?

@tkserver si votre débogueur a activé l'inspection du réseau, il remplacera le FormData du natif de réaction et entraînera la transmission d'un objet FormData vide qui ressemblera à [Object object] dans l'inspection du réseau.
Essayez de faire une demande en désactivant l'inspection du réseau, en espérant que cela vous aide.

Merci Aman725, minhphung210 et tout. Lorsque j'utilise le code sur un appareil réel, le téléchargement fonctionne correctement. Il semblerait que cela soit lié au simulateur iOS.

J'ai eu ce problème, mais il est résolu maintenant.

La raison en était que je déboguais des requêtes réseau. J'avais cette ligne de code dans le point d'entrée de mon application :

GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

Je l'ai commenté et ça marche maintenant.

// IMPORTANT: this will cause FormData requests to fail.
// GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

Je viens de trouver ceci : https://stackoverflow.com/a/47630754/387912 , cela aide-t-il ?

XMLHttpRequest

Pouvez-vous me dire comment avez-vous créé la demande pour qu'elle se télécharge correctement en multipartite ? J'obtiens toujours une erreur réseau :

Error: Network Error
    at createError (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:168963:17)
    at XMLHttpRequest.handleError (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:168871:16)
    at XMLHttpRequest.dispatchEvent (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:28708:27)
    at XMLHttpRequest.setReadyState (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:28461:20)
    at XMLHttpRequest.__didCompleteResponse (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:28288:16)
    at blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:28398:47
    at RCTDeviceEventEmitter.emit (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:3291:37)
    at MessageQueue.__callFunction (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:2588:44)
    at blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:2345:17
    at MessageQueue.__guard (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:2542:13)

MISE À JOUR : réussissez à le faire fonctionner maintenant. Utilise actuellement :

formData.append('picture', {
          uri: data.uri,
          name: fname,
          type: 'image/' + ext

        });

Si des personnes rencontrent toujours ce problème et que vous avez
GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
extrait pour déboguer les requêtes réseau, essayez d'ajouter
GLOBAL.FormData = GLOBAL.originalFormData || GLOBAL.FormData
ça a marché pour moi.

J'ai ajouté un type à l'intérieur de l'objet image comme "Image.type='image/png" juste avant l'ajout et j'ai également changé le type de contenu en "Content-Type":"multipart/form-data" :

        image.type='image/png'
        formData.append("resource", image);
        return axios
          .post('yourBAckendUrl', formData, {
            headers: {
              Authorization: "yourTokenHere",
              "Content-Type": "multipart/form-data"
            }
          })

J'espère que cela aidera quelqu'un.

Merci pour ton aide! J'ai pu télécharger ma photo avec iOS Simunator mais pas avec Android.

Après avoir défini le type d'image sur "image/jpeg", j'ai cessé d'avoir l'erreur réseau.

const formData = new FormData();
formData.append('file', {
  uri: pictureUri,
  type: 'image/jpeg',
  name: 'profile-picture'
})

J'ai ajouté un type à l'intérieur de l'objet image comme "Image.type='image/png" juste avant l'ajout et j'ai également changé le type de contenu en "Content-Type":"multipart/form-data" :

        image.type='image/png'
        formData.append("resource", image);
        return axios
          .post('yourBAckendUrl', formData, {
            headers: {
              Authorization: "yourTokenHere",
              "Content-Type": "multipart/form-data"
            }
          })

J'espère que cela aidera quelqu'un.

Merci pour ton aide! J'ai pu télécharger ma photo avec iOS Simunator mais pas avec Android.

Après avoir défini le type d'image sur "image/jpeg", j'ai cessé d'avoir l'erreur réseau.

const formData = new FormData();
formData.append('file', {
  uri: pictureUri,
  type: 'image/jpeg',
  name: 'profile-picture'
})

Pour tous ceux que cela peut être utile, si vous ne connaissez pas le type de contenu qui sera envoyé, utilisez le multipart/form-data . Cela semble évident de lire ceci maintenant, mais il m'a fallu une bonne heure pour faire fonctionner n'importe quel média.

    data.append("image", {
      name: "some_name", // also, won't work without this. A name is required
      height: image.height,
      width: image.width,
      type: "multipart/form-data", // <-- this part here
      uri:
        Platform.OS === "android" ? image.uri : image.uri.replace("file:/", "")
    });

Salut, j'essaie de déposer le téléchargement Axios dans Vue.Js. Quelqu'un peut-il examiner et expliquer le problème?

En Html
<input type="file" id="file" ref="file" multiple @change="assignFiles"/>

En Js

` assignFiles(e){

      let uploadedFiles = this.$refs.file.files;
      for( var i = 0; i < uploadedFiles.length; i++ ) { 
        this.form.AttachmentDocs.push(uploadedFiles[i]);           
      }
      console.log(this.form.AttachmentDocs);
 },`

Ainsi, lors du déclenchement de la publication, j'ajoute les données du formulaire.

`proceedSave(e) {

      e.preventDefault();
      this.$v.$touch();
      if(this.$v.$invalid) {
        return;
      }
    this.showLoading(this.loaderId,true);
      this.postDatas.append('form',JSON.stringify(this.form));
      for( var i = 0; i < this.form.AttachmentDocs.length; i++ ){ 
        let attachment = this.form.AttachmentDocs[i];
        this.postDatas.append('files['+i+']',attachment,attachment.name);           
      }

}`

Donc, dans le post, j'ai vérifié l'en-tête de la fenêtre de la console, il s'affiche

fichiers[0] : (binaire)
fichiers[1] : (binaire)
fichiers[2] : (binaire)
fichiers[3] : (binaire)

Dans mon côté serveur, je cnt pour obtenir les fichiers.

Peut-être qu'il y a quelque chose à voir avec

this.postDatas.append('files['+i+']',attachment,attachment.name);  

Essayez files['+' + i + '+']

J'ai le même problème avec fetch api. req.body était vide dans le nœud js. L'utilisation de « express-formidable » a résolu le problème. https://www.npmjs.com/package/express-formidable

Peut-être qu'il y a quelque chose à voir avec

this.postDatas.append('files['+i+']',attachment,attachment.name);  

Essayez files['+' + i + '+']

Sry + indique la concaténation, c'est l'utilisation de la chaîne '+' . Il en résultera des fichiers[+0+]

J'ai le même problème avec fetch api. req.body était vide dans le nœud js. L'utilisation de « express-formidable » a résolu le problème. https://www.npmjs.com/package/express-formidable

Avez-vous inclus app.use(express.json({ extended: false })); ?

Peut-être qu'il y a quelque chose à voir avec

this.postDatas.append('files['+i+']',attachment,attachment.name);  

Essayez files['+' + i + '+']

Sry + indique la concaténation, c'est l'utilisation de la chaîne '+' . Il en résultera des fichiers[+0+]

Votre code actuel se traduira toujours par files[+i+] dans votre boucle for. Ce ne sera jamais files[+0+], files[+1+], files[+2+], etc .

De plus, files[+0+] n'existera jamais. Pas sûr de ce que vous essayez de faire. Vous avez besoin de files[0], files[1], files[2]... ? Si vous essayez de construire un objet, vous pouvez avoir files['+0+'] , mais, encore une fois, je ne suis pas sûr de ce que vous essayez d'accomplir.

J'ai le même problème avec fetch api. req.body était vide dans le nœud js. L'utilisation de « express-formidable » a résolu le problème. https://www.npmjs.com/package/express-formidable

Avez-vous inclus app.use(express.json({ extended: false })); ?
Non. Cependant, dans formidable, j'ai un problème. L'image téléchargée va demander des champs. Rien dans les fichiers de demande. Je ne sais pas pourquoi cela se produit.

@duongtranpyco J'ai supprimé axios de mon projet, j'ai écrit ma propre classe simple à la place, profitez-en !

PS Si vous envoyez principalement du JSON, modifiez le code. Dans mon cas, le serveur attend généralement un formulaire.

const request = async ({url, method = 'GET', params, body, responseType = 'json', headers = {}})=>{
    const escape = (data, encode = encodeURIComponent)=>Object.keys(data||{}).reduce((pairs, key)=>{
        for (let value of [].concat(data[key]))
            pairs.push([`${key}`, `${value}`]);
        return pairs;
    }, []).map(pair=>pair.map(encode).join('=')).join('&');

    if (Object.keys(params||{}).length)
        url += '?'+escape(params);
    if (method=='POST' && typeof body=='object')
    {
        if (body instanceof FormData)
            headers['Content-Type'] = 'multipart/form-data';
        else
        {
            body = escape(body);
            headers['Content-Type'] = 'application/x-www-form-urlencoded';
        }
    }
    let {statusCode, request: req} = await new Promise((resolve, reject)=>{
        let xhr = new XMLHttpRequest();
        xhr.open(method, url, true);
        xhr.withCredentials = true;
        xhr.responseType = {json: 'text'}[responseType]||responseType;
        xhr.onload = ()=>resolve({statusCode: xhr.status, request: xhr});
        xhr.onerror = ()=>reject(new TypeError('Network request failed'));
        xhr.ontimeout = ()=>reject(new TypeError('Network request timed out'));
        for (let key in headers)
            xhr.setRequestHeader(key, headers[key]);
        xhr.send(body||null);
    });
    if (statusCode<200 || statusCode>=400)
        throw new Error(`network request failed with ${statusCode}: ${url}`);
    switch(responseType)
    {
        case 'json':
            return JSON.parse(req.responseText);
        case 'text':
            return req.responseText;
        case 'request':
            return req;
    }
    return req.response;
};

request.get = (url, opt = {})=>request({...opt, url, body: null});
request.post = (url, ...args)=>request({...args[1]||{}, url, method: 'POST', body: args[0]});

J'utilise ce code dans mon projet. J'essaye de comprendre ce code. Une question, cette ligne est-elle nécessaire,
pour (laisser la valeur de [].concat(data[key])) ? On peut l'écrire simplement,
paires.push([ ${key} , ${data[key]} ]);

Si des personnes rencontrent toujours ce problème et que vous avez
GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
extrait pour déboguer les requêtes réseau, essayez d'ajouter
GLOBAL.FormData = GLOBAL.originalFormData || GLOBAL.FormData
ça a marché pour moi.

Où est-ce que c'est?

J'ai aussi eu le problème. Cela est dû au chemin du fichier dans Android.
chemin const = utils.isAndroid() ?
Et cela fonctionne bien avec la mise en œuvre comme suit

    const formData = new FormData();
    const path = utils.isAndroid() ? `file://${filePath}` : filePath;
    formData.append('Voice', {
      uri: path,
      name: 'test',
      type: 'audio/wav',
    });

    formData.append('Content-Type', 'audio/wav');
     const headers =  {
        'Content-Type': 'multipart/form-data',
      };
    return this._sendRequest(url, 'POST', formData, headers);
 data.append('file', {
    uri: newData.image.path,
    type: 'image/jpeg',
    name: 'teste'

Utilisez un nom comme : name:'teste.jpeg' et cela fonctionnera. vous devez donner le format au fichier sinon cela ne fonctionnera pas.
Je l'ai corrigé en ayant le nom:'example.jpeg'

Après plusieurs jours à essayer de télécharger une vidéo avec axios, j'abandonne. RNFetchBlob est une meilleure option pour télécharger des fichiers à partir d'Android en particulier. Cette section est facile à mettre en œuvre

rn-fetch-blob

Cette page vous a été utile?
0 / 5 - 0 notes