React-native: React Native 0.62.* [TypeError : Échec de la demande réseau] lors du téléchargement du fichier

Créé le 6 avr. 2020  ·  263Commentaires  ·  Source: facebook/react-native

Veuillez fournir toutes les informations demandées. Les problèmes qui ne suivent pas ce format sont susceptibles de caler.

La description

Après la mise à niveau de 0.61.4 à 0.62.0, l'application ne téléchargera plus de fichiers depuis Android (toutes les autres requêtes fonctionnent correctement)

Version native de React :

0.62.0

Étapes à reproduire

  1. Installez une nouvelle application ReactNative via CLI
  2. Charger un fichier dans l'émulateur
  3. Essayez de télécharger un fichier en utilisant fetch
import Picker from "react-native-image-picker"
import {request, PERMISSIONS, RESULTS} from 'react-native-permissions';

class App extends React.Component {

  async componentDidMount() {

    try {
      await request(PERMISSIONS.ANDROID.WRITE_EXTERNAL_STORAGE)
      await Picker.launchImageLibrary({noData: true}, async (file) => {
        try {
           const body = new FormData()
           body.append("file", { type: file.type, size: file.fileSize, uri: `file://${file.path}`, name: file.fileName })
           const headers = { "content-type": "multipart/form-data", "accept": "application/json" }

          const req = await fetch("ANY_SERVER/upload/image", {
            method: "POST",
            headers,
            body
          })
          console.log(req.status)
        }  catch (e) {
          console.log(e)
        }
      })
    } catch (e) {
      console.log(e)
    }
  }

  render(){
    return <View/>
  }
}

Résultats attendus

La requête doit parvenir au serveur pour télécharger le fichier

Collation, exemple de code, capture d'écran ou lien vers un référentiel :

https://snack.expo.io/01W!bybf_
[Mon Apr 06 2020 21:29:18.704] LOG [TypeError: Network request failed]

Flipper React Native Team Attention Android

Commentaire le plus utile

Celui qui est toujours aux prises avec ce problème. cela se produit à cause du plugin réseau Flipper.
Je l'ai désactivé et tout fonctionne très bien.

Ma solution de contournement pour que cela fonctionne est de commenter la ligne numéro 43

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            <strong i="8">@Override</strong>
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

dans ce fichier android/app/src/debug/java/com/**/ReactNativeFlipper.java

Tous les 263 commentaires

Même problème ici!

Même problème !! Je suis bloqué sur ce problème depuis 2 jours ! J'ai presque tout cherché..

Vous devez ajouter ce uesCleartextTraffic="true" au fichier AndroidManifest.xml trouvé dans le répertoire _android/app/src/main/AndroidManifest.xml_

    <application
      ...
      android:usesCleartextTraffic="true">

Selon les docs

Lorsque l'attribut est défini sur "false", les composants de la plate-forme (par exemple, les piles HTTP et FTP, DownloadManager et MediaPlayer) refusent les demandes de l'application d'utiliser le trafic en texte clair. Les bibliothèques tierces sont fortement encouragées à respecter également ce paramètre. La principale raison d'éviter le trafic en clair est le manque de confidentialité, d'authenticité et de protection contre la falsification ; un attaquant du réseau peut espionner les données transmises et aussi les modifier sans être détecté.

Vous devez ajouter ce uesCleartextTraffic ="true" au fichier AndroidManifest,xml trouvé dans le répertoire android/app/src/main

    <application
      ...
      android:usesCleartextTraffic="true">

Selon les docs

Lorsque l'attribut est défini sur "false", les composants de la plate-forme (par exemple, les piles HTTP et FTP, DownloadManager et MediaPlayer) refusent les demandes de l'application d'utiliser le trafic en texte clair. Les bibliothèques tierces sont fortement encouragées à respecter également ce paramètre. La principale raison d'éviter le trafic en clair est le manque de confidentialité, d'authenticité et de protection contre la falsification ; un attaquant du réseau peut espionner les données transmises et aussi les modifier sans être détecté.

Je l'ai déjà essayé. Ceci est utilisé lorsque vous faites une demande à un serveur http, mais mon serveur fonctionne sur https. Il fonctionnait parfaitement avant de passer à la version 0.62.
Quelque chose ne va pas.

Toutes les autres requêtes fonctionnent parfaitement. Seuls les téléchargements de fichiers ne fonctionnent plus.

Toutes les autres requêtes fonctionnent parfaitement. Seuls les téléchargements de fichiers ne fonctionnent plus.

J'ai rencontré trop de problèmes lorsque j'ai essayé de passer à la version 0.62, même si j'ai créé une nouvelle application et y ai déplacé mon code. Je suis revenu à 0.61.5 jusqu'à ce qu'il devienne stable :/

Je suis confronté au même problème, car RN 0.62.0 et 0.62.1 génère cette erreur : Network request filed .
Toutes les requêtes fonctionnent sauf pour la publication d'image

Je suis revenu à la version 0.61.5 :( Il ne reste plus d'autre choix pour le moment. Si quelqu'un a besoin d'aide pour passer à la version 0.61.5, reportez-vous à react-native-upgrade-helper.

La même chose se produit ici !

J'ai rencontré le même problème, cela se produit sous Android, mais fonctionne bien sous IOS.
Je suppose que ce problème concerne Flipper Network.

Pendant un moment, j'ai commenté
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

dans ce dossier
/android/app/src/main/java/com/{your_project}/MainApplication.java

Ce problème se produit également de mon côté, et devinez ce qu'il ne se produit qu'en mode débogage. J'ai essayé de construire dans internalRelease et cela fonctionne bien. Je suppose que c'est à cause du rechargement automatique/rapide en mode débogage qui applique une communication flipper qui semble être liée à ce problème.

Un autre problème ici est qu'il n'y a pas d'erreur dans android logcat. J'ai également passé quelques jours à chercher comment résoudre ce problème, toujours pas de chance.

Celui qui est toujours aux prises avec ce problème. cela se produit à cause du plugin réseau Flipper.
Je l'ai désactivé et tout fonctionne très bien.

Ma solution de contournement pour que cela fonctionne est de commenter la ligne numéro 43

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            <strong i="8">@Override</strong>
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

dans ce fichier android/app/src/debug/java/com/**/ReactNativeFlipper.java

Merci pour le problème @abumostafa. Cela se produit-il dans un nouveau modèle React Native prêt à l'emploi ? Si c'est le cas, cela devrait être examiné, sinon n'hésitez pas à le fermer.

:Attention:Exemple reproductible manquant
:la source d'information:Il semble qu'il manque un exemple reproductible à votre problème. Veuillez fournir une collation ou un référentiel qui illustre le problème que vous signalez de manière minimale, complète et reproductible .
:Attention:Utilisation de l'ancienne version
:la source d'information:Il semble que vous utilisiez une ancienne version de React Native. Veuillez mettre à niveau vers la dernière version et vérifier si le problème persiste. Si ce n'est pas le cas, veuillez nous en informer afin que nous puissions résoudre ce problème. Cela nous aide à nous assurer que nous examinons les problèmes qui existent toujours dans la version actuelle.

Merci pour le problème @abumostafa. Cela se produit-il dans un nouveau modèle React Native prêt à l'emploi ? Si c'est le cas, cela devrait être examiné, sinon n'hésitez pas à le fermer.

Cela se produit toujours dans le dernier nouveau modèle React Native 0.62.1

Merci pour le problème @abumostafa. Cela se produit-il dans un nouveau modèle React Native prêt à l'emploi ? Si c'est le cas, cela devrait être examiné, sinon n'hésitez pas à le fermer.

Cela se produit toujours dans le dernier nouveau modèle React Native 0.62.1

@safiyeh
Je peux confirmer. Cela se produit toujours dans le dernier modèle natif de réaction fraîche 0.62.1

Celui qui est toujours aux prises avec ce problème. cela se produit à cause du plugin réseau Flipper.
Je l'ai désactivé et tout fonctionne très bien.

Ma solution de contournement pour que cela fonctionne est de commenter la ligne numéro 43

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            <strong i="9">@Override</strong>
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

dans ce fichier android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

Toujours en cours dans 0.62.2, et cela résout temporairement le problème sur Android

@abumostafa

*Essaye ça *

essayez d'implémenter "rn-fetch-blob"

````
importer RNFetchBlob depuis "rn-fetch-blob" ;

RNFetchBlob.fetch('POST',, {
Acceptez : 'application/json',
'Content-Type' : 'multipart/form-data',}, [
{ nom : 'profileimage', nom de fichier : this.state.filePath.fileName, données : RNFetchBlob.wrap(this.state.filePath.uri) },
{ nom : 'uid', données : uidy },
{ nom : 'dob', données : this.state.fDOB},
{ nom : 'numéro de téléphone', données : cet état.pnuméro},
{ nom : 'adresse', données : cet.état.adresse},
{ nom : 'genre', données : this.state.isgender},
{ nom : 'nom d'utilisateur', données : this.state.fulname}
// type de contenu personnalisé
]).then((res) => {
console.log(res)
ResponseHelper.success('Mise à jour');
this.setState({commence :false})
})
.catch((err) => {
this.setState({commence :false})
ResponseHelper.success('Problème de serveur, veuillez réessayer');
console.log('err', erreur);
})
````

cela résoudra votre problème

RNFetchBlob.wrap

Merci. J'ai une question. Est-ce que cette fonction RNFetchBlob.wrap convertit le fichier en base64 ?

Celui qui est toujours aux prises avec ce problème. cela se produit à cause du plugin réseau Flipper.
Je l'ai désactivé et tout fonctionne très bien.

Ma solution de contournement pour que cela fonctionne est de commenter la ligne numéro 43

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            <strong i="9">@Override</strong>
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

dans ce fichier android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

Merci @abumostafa Cette solution de contournement m'a fait gagner beaucoup de temps. J'ai déjà passé beaucoup de temps sur une erreur de téléchargement de fichier, puis j'ai eu votre problème. Au fait, saviez-vous que le problème était résolu ou non ?

J'ai envoyé un ping à l'équipe Flipper, le travail pour cela sera suivi ici : https://github.com/facebook/flipper/issues/993

J'ai essayé les deux solutions proposées par @abumostafa et @alfianwahid ; J'ai essayé de rétrograder à 0.61.5 ; J'ai essayé d'implémenter avec fetch (j'utilise axios); aucun n'a fonctionné. j'utilise la version 0.62.1

J'ai essayé les deux solutions proposées par @abumostafa et @alfianwahid ; J'ai essayé de rétrograder à 0.61.5 ; J'ai essayé d'implémenter avec fetch (j'utilise axios); aucun n'a fonctionné. j'utilise la version 0.62.1

avez-vous essayé de reconstruire l'application après les modifications ??

@abumostafa Je ne sais pas si je l'ai bien fait. Mais j'ai supprimé le dossier node_modules , yarn.lock , exécuté les commandes ./gradlew clean et ./gradlew cleanBuildCache et exécuté à nouveau npx react-native run-android .

Je rencontre le même problème en ce moment sur RN 0.61.4 et axios 0.19.2. J'ai également essayé de commenter initializeFlipper(this); cleanBuildCache et j'obtiens toujours Network Error .

ouvrez le dossier Android et recherchez le fichier ReactNativeFlipper.java et
commentez la ligne numéro 43
// builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));

android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

Dans mon cas, je n'ai pas ce fichier dans mon projet

Dans mon cas, je n'ai pas ce fichier dans mon projet
avez-vous un dossier Android
si vous avez une recherche dans le dossier de l'application

RNFetchBlob.wrap

Merci. J'ai une question. Est-ce que cette fonction RNFetchBlob.wrap convertit le fichier en base64 ?

https://github.com/joltup/rn-fetch-blob/wiki/Fetch-API#class -rnfetchblob

Pareil ici, par exemple essayer de fetch("https://www.mocky.io/v2/5185415ba171ea3a00704eed") soulève un TypeError: Network request failed .
Cela se produit uniquement sous Android, à la fois en débogage et en version, et à la fois avec et sans débogage à distance.
L'ajout android:usesCleartextTraffic="true" n'a pas aidé (mais c'est quand même pour les requêtes non SSL).
Utilisation de RN 0.62.2.

Edit : la récupération de https://jsonplaceholder.typicode.com/todos/1 fonctionne ! Comment certains sites peuvent-ils fonctionner et d'autres non ? !

Mise à jour, après avoir fait quelques tests , nous sommes arrivés à la conclusion que cela était dû à des certificats SSL défaillants. Nous ne savons pas ce qui ne va pas avec ceux-ci, mais le problème se produit également dans Postman avec l'option "Vérification du certificat SSL" activée. Se pourrait-il que l'autorité de certification ne soit pas dans la liste du téléphone ?

Je viens de passer la dernière journée à me battre avec ce problème. Préfixer mon chemin absolu avec "file://" pour que vous terminiez avec trois / a réglé le problème pour moi.

Un exemple de chemin :

file:///data/data/com.fake/cache/file-name.jpeg

Exemple de mon code :

fetch(url, {
  method: "POST",
  body: {
    uri: 'file://' + file.absolutePath,
    type: file.type,
    name: file.name,
  },
  headers: headers,
  credentials: "include",
})

J'utilise react-native@^0.62.2

Le correctif a-t-il été publié ? Comment mettons-nous à jour ?

Toujours en 0.62.2, y a-t-il des mises à jour à ce sujet ?

Celui qui est toujours aux prises avec ce problème. cela se produit à cause du plugin réseau Flipper.
Je l'ai désactivé et tout fonctionne très bien.
Ma solution de contournement pour que cela fonctionne est de commenter la ligne numéro 43

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            <strong i="10">@Override</strong>
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

dans ce fichier android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

Toujours en cours dans 0.62.2, et cela résout temporairement le problème sur Android

Cela le résout pour l'instant.

Celui qui est toujours aux prises avec ce problème. cela se produit à cause du plugin réseau Flipper.
Je l'ai désactivé et tout fonctionne très bien.

Ma solution de contournement pour que cela fonctionne est de commenter la ligne numéro 43

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            <strong i="9">@Override</strong>
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

dans ce fichier android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

cela a fait ma journée ! fonctionne bien avec RN 0.62.0. Merci!

Flipper a publié une mise à jour, veuillez consulter le dernier commentaire https://github.com/facebook/flipper/issues/993#issuecomment -619823916 Est-ce que react-native publiera une mise à jour pour refléter ce correctif ?

Vous obtenez toujours un Network request failed avec ce nouveau Flipper 0.39.0 lorsque vous essayez de fetch("https://www.mocky.io/v2/5185415ba171ea3a00704eed") , même si cela fonctionne dans Chrome/Firefox/Safari.

@antoinerousseau Vous voudrez peut-être le dire là... Je ne l'ai pas testé.

@aprilmintacpineda J'ai posté sur https://github.com/facebook/react-native/issues/26939 à la place, cela semble plus lié, et je ne sais pas si c'est lié à Flipper ?

Ce problème est résolu en mettant à jour Flipper dans ce fichier

/yourproject/android/gradle.properties Ligne 28
gradle {.line-numbers} 25 android.enableJetifier=true 26 27 # Version of flipper SDK to use with React Native 28 FLIPPER_VERSION=0.41.0 //upgrade to latest flipper
Voir :
https://github.com/facebook/flipper/issues/993#issuecomment -619823916

j'ai eu le même problème avec réagir 0.61.4

Merci @alfianwahid
Résolu mon problème.

peut-on clôturer ce ticket ?

M'a aidé aussi 💪

@abumostafa , Merci frère, cela m'a sauvé 48 heures de recherche

peut-on clôturer ce ticket ?

Je suis confus. Pourquoi voulez-vous fermer ce problème si vous n'avez trouvé qu'une solution de contournement et que le problème n'a pas été résolu ?

Salut tout le monde, j'ai aussi essayé avec axios et fetch mais rien de tout cela n'a fonctionné, j'ai aussi essayé de commenter la ligne Flipper et de la mettre à jour mais cela n'a pas non plus d'effet. Si vous rencontrez toujours des problèmes avec cela, essayez de faire votre requête POST avec XMLHttpRequest , cela a fonctionné pour moi.
J'espère que ça aide.

Ce problème se produit également de mon côté, et devinez ce qu'il ne se produit qu'en mode débogage. J'ai essayé de construire dans internalRelease et cela fonctionne bien. Je suppose que c'est à cause du rechargement automatique/rapide en mode débogage qui applique une communication flipper qui semble être liée à ce problème.

Un autre problème ici est qu'il n'y a pas d'erreur dans android logcat. J'ai également passé quelques jours à chercher comment résoudre ce problème, toujours pas de chance.

Comment l'avez-vous résolu ? @trglairnarra

Je suis confronté au même problème, car RN 0.62.0 et 0.62.1 génère cette erreur : Network request filed .
Toutes les requêtes fonctionnent sauf pour la publication d'image

Pareil ici. Comment l'avez-vous résolu ? Mon application fonctionne bien en mode release mais pas en mode build

Celui qui est toujours aux prises avec ce problème. cela se produit à cause du plugin réseau Flipper.
Je l'ai désactivé et tout fonctionne très bien.

Ma solution de contournement pour que cela fonctionne est de commenter la ligne numéro 43

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            <strong i="9">@Override</strong>
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

dans ce fichier android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

Vous avez sauvé ma journée. Merci beaucoup :) Mais est-ce sûr de le faire pour les futures versions ?

Salut, je reçois toujours le problème dans 62.2.
Solutions essayées

  1. android:usesCleartextTraffic="true" => Même toutes mes autres API fonctionnent, j'ai aussi HTTP.
  2. commentant la ligne numéro 43
  3. pas de problème avec "file://", => même sans ajouter d'image, nous ajoutons simplement json formdata obtenant toujours la même erreur.

Salut, je reçois toujours le problème dans 62.2.
Solutions essayées

  1. android:usesCleartextTraffic="true" => Même toutes mes autres API fonctionnent, j'ai aussi HTTP.
  2. commentant la ligne numéro 43
  3. pas de problème avec "file://", => même sans ajouter d'image, nous ajoutons simplement json formdata obtenant toujours la même erreur.

@jamisonrachford essayez de faire votre demande avec XMLHttpRequest

Ce problème est résolu en mettant à jour Flipper dans ce fichier

/yourproject/android/gradle.properties Ligne 28

25  android.enableJetifier=true  
26  
27  # Version of flipper SDK to use with React Native 
28  FLIPPER_VERSION=0.41.0  //upgrade to latest flipper

Voir :
facebook/flipper#993 (commentaire)

faire manuellement FLIPPER_VERSION=0.41.0 au lieu d'utiliser la valeur par défaut FLIPPER_VERSION=0.33.1 avec RN 0.62.2 provoque l'échec de la construction (image jointe). Ai-je raté une étape dans la mise à jour de la version flipper ?
gradle issues

J'utilise expo. Comment puis-je résoudre ça?

Ce problème est résolu en mettant à jour Flipper dans ce fichier

/yourproject/android/gradle.properties Ligne 28

25  android.enableJetifier=true  
26  
27  # Version of flipper SDK to use with React Native 
28  FLIPPER_VERSION=0.41.0  //upgrade to latest flipper

Voir :
facebook/flipper#993 (commentaire)

Merci beaucoup !

Ce problème est résolu en mettant à jour Flipper dans ce fichier

/yourproject/android/gradle.properties Ligne 28

25  android.enableJetifier=true  
26  
27  # Version of flipper SDK to use with React Native 
28  FLIPPER_VERSION=0.41.0  //upgrade to latest flipper

Voir :
facebook/flipper#993 (commentaire)
Merci!
Ce problème m'a dérangé pendant deux jours

J'utilise expo client, il doit y avoir une solution pour ça ? Je cherche depuis des jours et sans succès, quelqu'un peut-il m'aider s'il vous plaît comment nous pouvons y parvenir à l'expo?

@ Hiti3 J'utilise aussi expo. Je suis également à la recherche d'une solution. Ce que je fais maintenant est d'envoyer une chaîne base64 (pas de formData) et de la décoder côté serveur :

Expo
`import * as ImagePicker from 'expo-image-picker';

// Sélecteur d'images
exporter asynchrone par défaut () => {
permission const = attendre ImagePicker.requestCameraRollPermissionsAsync();
if (permission.granted === 'false') return 'denied';
options const = { allowEditing : vrai, base64 : vrai } ;
résultat const = ImagePicker.launchImageLibraryAsync(options);
retourner le résultat ;
} ;
`

Du côté serveur
`
const sharp = require('sharp');
exports.uploadImage = async (req, res, next) => {
const { image } = req.body ;
const {
type : type d'image,
nom : nom de l'image,
base64 : imageBase64,
chemin : imagePath,
redimensionner,
} = image ;

const base64Data = imageBase64.replace( data:image/${imageType};base64 , '');

var img = nouveau tampon (base64Data, 'base64');
chemin const = __dirname + ./../../public/${imagePath}/${imageName} ;

si (redimensionner) {
essayer {
attendre pointu(img)
.redimensionner(500, 500)
.toFormat('jpeg')
.jpeg({ qualité : 90 })
.toFile(chemin);
} attraper (erreur) {
console.log('Erreur d'écriture', erreur);
}
}
si (!redimensionner) {
essayer {
attendre sharp(img).toFormat('jpeg').jpeg({ quality: 90 }).toFile(path);
} attraper (erreur) {
console.log('Erreur d'écriture', erreur);
}
}
req.image = { imageType, imageName, imagePath } ;
suivant();
} ;
`

Aide ça a aidé. Si vous avez un problème, s'il vous plaît envoyez-moi un message.

Merci pour la solution fournie, cela fonctionne comme testé, je veux juste
être sûr à nouveau avant de quitter le navire et de perdre un jour peut-être. Et tu es
télécharger une vidéo ou une image si je comprends bien?

Le mar. 19 mai 2020, 21:44 Gustavo Leite Silvano, [email protected]
a écrit:

@Hiti3 https://github.com/Hiti3 J'utilise aussi expo. je suis aussi
la recherche d'une solution. Ce que je fais maintenant est d'envoyer une chaîne base64 (non
formData) et décodez-le côté serveur :

Expo
`import * as ImagePicker from 'expo-image-picker';

// Sélecteur d'images
exporter asynchrone par défaut () => {
permission const = attendre ImagePicker.requestCameraRollPermissionsAsync();
if (permission.granted === 'false') return 'denied';
options const = { allowEditing : vrai, base64 : vrai } ;
résultat const = ImagePicker.launchImageLibraryAsync(options);
retourner le résultat ;
} ;
`

Du côté serveur
`
const sharp = require('sharp');
exports.uploadImage = async (req, res, next) => {
const { image } = req.body ;
const {
type : type d'image,
nom : nom de l'image,
base64 : imageBase64,
chemin : imagePath,
redimensionner,
} = image ;

const base64Data = imageBase64.replace(data:image/${imageType};base64,
'');

var img = nouveau tampon (base64Data, 'base64');
chemin const = __dirname + ./../../public/${imagePath}/${imageName} ;

si (redimensionner) {
essayer {
attendre pointu(img)
.redimensionner(500, 500)
.toFormat('jpeg')
.jpeg({ qualité : 90 })
.toFile(chemin);
} attraper (erreur) {
console.log('Erreur d'écriture', erreur);
}
}
si (!redimensionner) {
essayer {
attendre sharp(img).toFormat('jpeg').jpeg({ quality: 90 }).toFile(path);
} attraper (erreur) {
console.log('Erreur d'écriture', erreur);
}
}
req.image = { imageType, imageName, imagePath } ;
suivant();
} ;
`

Aide ça a aidé. Si vous avez un problème, s'il vous plaît envoyez-moi un message.


Vous recevez ceci parce que vous avez été mentionné.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/facebook/react-native/issues/28551#issuecomment-631041471 ,
ou désabonnez-vous
https://github.com/notifications/unsubscribe-auth/ACGFH2MSYJ2J5YDRASXISOTRSLOQFANCNFSM4MCRHIRA
.

0.41.0

Merci beaucoup.

Ce problème est résolu en mettant à jour Flipper dans ce fichier
/yourproject/android/gradle.properties Ligne 28

25  android.enableJetifier=true  
26  
27  # Version of flipper SDK to use with React Native 
28  FLIPPER_VERSION=0.41.0  //upgrade to latest flipper

Voir :
facebook/flipper#993 (commentaire)

Merci beaucoup !

@Hiti3 Juste une image. Mais je pense que vous pouvez aussi télécharger des vidéos.

Merci @alfianwahid
mais j'ai utilisé
FLIPPER_VERSION=0.44.0

J'avais le même problème, j'ai tout essayé et je suis resté dessus pendant 4 à 5 jours, puis j'ai utilisé le package RN-FETCH-BLOB, cela a vraiment résolu le problème de l'envoi des fichiers. utilisez-le vous ne regretterez jamais

Après avoir appliqué les deux correctifs ci-dessus, la demande de réseau échoue toujours. Dans mon cas, le fichier est mis à jour sur le serveur mais cela donne l'erreur.

c'est peut-être un problème de la façon dont vous envoyez les données

c'est peut-être un problème de la façon dont vous envoyez les données

J'examine la question. Mais si la méthode d'envoi n'est pas correcte, alors pourquoi les données sont mises à jour sur le serveur.

J'ai essayé toutes les solutions mais aucun succès sur Android. j'utilise 0.62.2
Screen Shot 2020-05-31 at 6 40 53 PM

@tamangsuresh Hé mec, as-tu trouvé une solution pour ça ?

@Brianop aucun homme

merci d'avoir mis à jour flipper, je l'ai résolu

Salut, quelqu'un a-t-il résolu le problème ?, je suis confronté au même problème.

Salut, quelqu'un a-t-il résolu ce problème ? , Je suis également confronté au même problème.
Vous devez mettre à jour le flipper à la dernière version

@liyuewen j'ai mis à niveau le flipper dans le projet RN et le flipper aussi. Mais aucun succès.

@liyuewen J'ai aussi la mise à niveau du flipper et le flipper dans le projet RN. Mais sans aucun succès.

Après la mise à niveau, vous devez vider le cache Android

@liyuewen J'ai fait ça aussi. Mais pas de chance.

Ce problème est résolu en mettant à jour Flipper dans ce fichier

/yourproject/android/gradle.properties Ligne 28

25  android.enableJetifier=true  
26  
27  # Version of flipper SDK to use with React Native 
28  FLIPPER_VERSION=0.41.0  //upgrade to latest flipper

Voir :
facebook/flipper#993 (commentaire)
Dans mon projet, la version flipper est disponible à cet emplacement D: myProjectnode_modulesreact-nativetemplateandroidgradle.properties. J'ai mis à jour le flipper dans le gradle à cet endroit et les autres gradle.properties qui se trouvent dans /myProject/android/gradle.properties. De plus, les données sont mises à jour sur le serveur et je les ai testées dans Postman, elles fonctionnent également bien dans Postman. J'ai aussi commenté le code raconté par @abumostafa

@liyuewen J'ai fait ça aussi. Mais sans aucune chance.

Ma version est "react native": "^ 0.62.2", qui a du succès dans le futur

Mettre à jour Flipper à 0.45, résoudre le problème

Je n'utilise Flipper nulle part, j'ai toujours le même problème :(

Je n'utilise Flipper nulle part, j'ai toujours le même problème :(

Idem ici, en utilisant Expo.. Cela ne devrait pas être un problème pour tant de personnes, en particulier lors de l'utilisation d'un espace de travail géré où la fonctionnalité est présentée de manière ambiguë comme une fonction de travail.

Quelqu'un a des mises à jour sur ce problème. J'ai essayé de mettre à jour flipper, en commentant flipper dans l'activité principale. Toujours ce problème sous android.
Renvoie [TypeError : échec de la requête réseau].
Mais le même code fonctionne bien dans iOS

Quelqu'un a des mises à jour sur ce problème. J'ai essayé de mettre à jour flipper, en commentant flipper dans l'activité principale. Toujours ce problème sous android.
Renvoie [TypeError : échec de la requête réseau].
Mais le même code fonctionne bien dans iOS

initializeFlipper(this, getReactNativeHost().getReactInstanceManager());

La suppression de cette ligne dans MainApplication.java fonctionne. Le problème est toujours là dans la version de débogage. mais cela fonctionne dans la version de version.

Quelqu'un a des mises à jour sur ce problème. J'ai essayé de mettre à jour flipper, en commentant flipper dans l'activité principale. Toujours ce problème sous android.
Renvoie [TypeError : échec de la requête réseau].
Mais le même code fonctionne bien dans iOS

initializeFlipper(this, getReactNativeHost().getReactInstanceManager());

La suppression de cette ligne dans MainApplication.java fonctionne. Le problème est toujours là dans la version de débogage. mais cela fonctionne dans la version de version.

Merci, je n'ai jamais essayé de tester dans la version de version. Je vais essayer ça aujourd'hui.

J'ai la v59 réactive native. Alors, que peuvent faire ceux qui n'utilisent pas le Flipper ? Y a-t-il des mises à jour ?

Voici toutes les données pertinentes que je pourrais penser à extraire de mon application. Je rencontre le même problème, sur le simulateur iOS.

RN 0.62.2, Flipper 0.46.0, sur une application Expo éjectée.

  // Turn the recording into a multipart form request with recording = the contents of our file.
  let fileUri = recording.getURI();
  if (!fileUri) {
    throw new Error('fileUri is null, it should always be initialized before reaching this point.');
  }

  let body = new FormData();
  body.append('recording', {
    uri: fileUri,
    name: 'voice-command.mp4',
    type: 'audio/mp4'
  });

  // Kick off the transcription job.
  var response;
  try {
    response = await fetch(
      'http://localhost:5000/api/v0/commands/transcription/start',
      {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
        },
        body,
      },
    );
  } catch (error) {
    console.error(error);
    throw error;
  }

TypeError : Échec de la requête réseau
http://localhost :8081/index.bundle?platform=ios&dev=true&minify= false:32085 :31
dispatchEvent@http :// localhost:8081/index.bundle?platform=ios&dev=true&minify=false :34645:31
setReadyState@http :// localhost:8081/index.bundle?platform=ios&dev=true&minify=false :33729:33
__didCompleteResponse@http :// localhost:8081/index.bundle?platform=ios&dev=true&minify=false :33556:29
émet@http :// localhost:8081/index.bundle?platform=ios&dev=true&minify=false :9744:42
__callFunction@http :// localhost:8081/index.bundle?platform=ios&dev=true&minify=false :5491:49
http://localhost :8081/index.bundle?platform=ios&dev=true&minify= false:5213 :31
__guard@http :// localhost:8081/index.bundle?platform=ios&dev=true&minify=false :5445:15
callFunctionReturnFlushedQueue@http :// localhost:8081/index.bundle?platform=ios&dev=true&minify=false :5212:21
callFunctionReturnFlushedQueue@[code natif]

Info.plist est configuré pour autoriser les requêtes localhost.

    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>

Mon package.json :

{
  "name": "EstimateMobileApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "ios": "react-native run-ios",
    "android": "react-native run-android",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/native": "^5.4.2",
    "@react-navigation/stack": "^5.3.9",
    "@types/react-native-vector-icons": "^6.4.5",
    "expo": "^37.0.12",
    "expo-av": "^8.1.0",
    "react": "^16.11.0",
    "react-native": "^0.62.2",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-reanimated": "^1.8.0",
    "react-native-safe-area-context": "^1.0.2",
    "react-native-screens": "^2.7.0",
    "react-native-unimodules": "^0.9.1",
    "react-native-vector-icons": "^6.6.0",
    "tailwind-rn": "^1.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/runtime": "^7.9.0",
    "@react-native-community/eslint-config": "^0.0.5",
    "@types/jest": "^25.2.3",
    "@types/react": "^16.9.35",
    "@types/react-native": "^0.62.10",
    "@types/react-test-renderer": "^16.9.2",
    "babel-jest": "^24.9.0",
    "eslint": "^6.5.1",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.58.0",
    "react-test-renderer": "16.11.0",
    "tailwindcss": "^1.4.6",
    "typescript": "^3.9.3"
  },
  "jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-(native|universal|navigation)-(.*)|@react-native-community/(.*)|@react-navigation/(.*))"
    ]
  }
}

Et mon Podfile :

platform :ios, '10.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
require_relative '../node_modules/react-native-unimodules/cocoapods.rb'

def flipper_pods()
  flipperkit_version = '0.46.0'
  pod 'FlipperKit', '~>' + flipperkit_version, :configuration => 'Debug'
  pod 'FlipperKit/FlipperKitLayoutPlugin', '~>' + flipperkit_version, :configuration => 'Debug'
  pod 'FlipperKit/SKIOSNetworkPlugin', '~>' + flipperkit_version, :configuration => 'Debug'
  pod 'FlipperKit/FlipperKitUserDefaultsPlugin', '~>' + flipperkit_version, :configuration => 'Debug'
  pod 'FlipperKit/FlipperKitReactPlugin', '~>' + flipperkit_version, :configuration => 'Debug'
end

# Post Install processing for Flipper
def flipper_post_install(installer)
  file_name = Dir.glob("*.xcodeproj")[0]
  app_project = Xcodeproj::Project.open(file_name)
  app_project.native_targets.each do |target|
    target.build_configurations.each do |config|
      cflags = config.build_settings['OTHER_CFLAGS'] || '$(inherited) '
      unless cflags.include? '-DFB_SONARKIT_ENABLED=1'
        puts 'Adding -DFB_SONARKIT_ENABLED=1 in OTHER_CFLAGS...'
        cflags << '-DFB_SONARKIT_ENABLED=1'
      end
      config.build_settings['OTHER_CFLAGS'] = cflags
    end
    app_project.save
  end
  installer.pods_project.targets.each do |target|
    if target.name == 'YogaKit'
      target.build_configurations.each do |config|
        config.build_settings['SWIFT_VERSION'] = '4.1'
      end
    end
  end
  installer.pods_project.save
end

target 'EstimateMobileApp' do
  # Pods for EstimateMobileApp
  pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
  pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
  pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
  pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/'
  pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
  pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'

  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
  pod 'ReactCommon/callinvoker', :path => "../node_modules/react-native/ReactCommon"
  pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"
  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga', :modular_headers => true

  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

  target 'EstimateMobileAppTests' do
    inherit! :complete
    # Pods for testing
  end

  use_native_modules!
  use_unimodules!

  flipper_pods()
  post_install do |installer|
    flipper_post_install(installer)
  end
end

target 'EstimateMobileApp-tvOS' do
  # Pods for EstimateMobileApp-tvOS

  target 'EstimateMobileApp-tvOSTests' do
    inherit! :search_paths
    # Pods for testing
  end
end

J'ai la v59 réactive native. Alors, que peuvent faire ceux qui n'utilisent pas le Flipper ? Y a-t-il des mises à jour ?

Je n'avais pas ce problème dans les versions précédentes. Votre problème pourrait être quelque chose de différent, je pense. Utilisez-vous l'URL https ?

J'ai la v59 réactive native. Alors, que peuvent faire ceux qui n'utilisent pas le Flipper ? Y a-t-il des mises à jour ?

Je n'avais pas ce problème dans les versions précédentes. Votre problème pourrait être quelque chose de différent, je pense. Utilisez-vous l'URL https ?

Oui, https.
Existe-t-il des limitations pour l'objet formData dans RN, par exemple, il pourrait s'agir d'une longueur de chaîne ou d'une taille formData ? Il semble que le RN intercepte cette demande et génère cette erreur

J'ai la v59 réactive native. Alors, que peuvent faire ceux qui n'utilisent pas le Flipper ? Y a-t-il des mises à jour ?

Je n'avais pas ce problème dans les versions précédentes. Votre problème pourrait être quelque chose de différent, je pense. Utilisez-vous l'URL https ?

Oui, https.
Existe-t-il des limitations pour l'objet formData dans RN, par exemple, il pourrait s'agir d'une longueur de chaîne ou d'une taille formData ? Il semble que le RN intercepte cette demande et génère cette erreur

Je n'ai pas connaissance de telles limitations. Pouvez-vous partager le code ? Et cela a-t-il fonctionné sur iOS ?

J'ai besoin d'atteindre une telle structure de corps de requête :

{
    "user_uuid":"9a137...",
    "contract_uuid":"881d9...",
    "files":[
        {"document_type_id":"20","document_type_title":"test1","private_flag":"0","file":{}},
        {"document_type_id":"21","document_type_title":"test2","private_flag":"1","file":{}},
        {"document_type_id":"22","document_type_title":"test3","private_flag":"1","file":{}}
    ]
}

où le fichier est un objet de fichier JS avec les champs name , type , uri , size , etc.

const fileArrayToSend = await Promise.all(
            fileSelect.map(async (file, index) => {
                const documentTypeNum = Number(documentType[index]) || 0;

                return {
                    document_type_id: documentTypeNum,
                    document_type_title: customType ? customType[index] : null,
                    private_flag: isPrivate[index] ? 1 : 0,
                    file: {
                        name: file.name, 
                        type: file.type,
                        uri: file.uri, 
                        size: file.size
                    }
                };
            })
        );
let body = {
    contract_uuid: contract.uuid,
    user_uuid: userUUID
};

const formData = new FormData();
const appendToFormData = (formData, object) => {
    for (let [key, value] of Object.entries(object)) {
        if (value) {
            formData.append(key, value);
        }
    }
};
appendToFormData(formData, body);

fileArrayToSend.forEach((file, index) => {
    formData.append(`files[${index}]`, file, file.file.name);
});
let response = await Axios.post(`${config.apiEndpoint}/store_document_request_action`, formData, {
    headers: { 'Content-Type': 'multipart/form-data' }
});

image

J'ai eu le même problème dans mon projet avec la version 0.62 de react-native.
J'ai mis à jour le flipper à "0.41.0" et cela a fonctionné.
Dans gradle.propriétés
FLIPPER_VERSION=0.41.0

J'ai eu le même problème dans mon projet avec la version 0.62 de react-native.
J'ai mis à jour le flipper à "0.41.0" et cela a fonctionné.
Dans gradle.propriétés
FLIPPER_VERSION=0.41.0

Pouvez-vous s'il vous plaît mentionner le chemin de gradle.properties, gradle.properties dans Android ne contient pas de version flipper. Mais gradle.properties dans le dossier React Android a une version flipper.

@nharis7 c'est dans /android/gradle.properties
Annotation 2020-06-12 210640
Mais quelle est votre version de react-native ? flipper n'est disponible que dans la version 0.62 et supérieure de react-native. Il n'y a pas de flipper dans les anciennes versions.

@nharis7 c'est dans /android/gradle.properties
Annotation 2020-06-12 210640
Mais quelle est votre version de react-native ? flipper n'est disponible que dans la version 0.62 et supérieure de react-native. Il n'y a pas de flipper dans les anciennes versions.

Actuellement, je suis sur 0.62.2 et j'ai mis à jour mon projet de 0.61 dans mon /android/gradle.properties. J'ai créé un nouveau projet avec maintenant je peux voir la version flipper dans /android/gradle.properties. Je vais migrer toutes mes affaires vers un nouveau projet et je verrai si ce problème est résolu ou non.

CETTE SOLUTION A FONCTIONNÉ POUR MOI
https://github.com/axios/axios/issues/1567#issuecomment -518118223

La mise à niveau du flipper le corrige ! (je suis passé à 0.46.0)

J'ai essayé tout au dessus !
seule la mise à niveau du flipper vers la version 0.46 peut le réparer !

image

"dependencies": {
    "@react-native-community/async-storage": "^1.11.0",
    "@react-native-community/cameraroll": "^1.7.2",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/drawer": "^5.8.1",
    "@react-navigation/material-bottom-tabs": "^5.2.9",
    "@react-navigation/native": "^5.5.0",
    "@react-navigation/stack": "^5.4.1",
    "axios": "^0.19.2",
    "mime-types": "^2.1.27",
    "path": "^0.12.7",
    "query-string": "^6.13.1",
    "react": "16.11.0",
    "react-native": "0.62.2",
    "react-native-animatable": "^1.3.3",
    "react-native-animate-loading-button": "^1.0.3",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-image-picker": "^2.3.1",
    "react-native-image-resizer": "^1.2.3",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-paper": "^3.10.1",
    "react-native-reanimated": "^1.9.0",
    "react-native-safe-area-context": "^3.0.2",
    "react-native-screens": "^2.8.0",
    "react-native-swiper": "^1.6.0",
    "react-native-vector-icons": "^6.6.0"
  },

Ce problème est résolu en mettant à jour Flipper dans ce fichier

/yourproject/android/gradle.properties Ligne 28

25  android.enableJetifier=true  
26  
27  # Version of flipper SDK to use with React Native 
28  FLIPPER_VERSION=0.41.0  //upgrade to latest flipper

Voir :
facebook/flipper#993 (commentaire)

Cela a plutôt bien fonctionné, cela a résolu le problème sur Android, merci beaucoup.

J'ai rencontré le même problème, cela se produit sur Android mais cela fonctionne bien sur IOS.
Je pense que cette question sur le réseau Flipper.

Pour l'instant, j'ai commenté
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

dans ce dossier
/android/app/src/main/java/com/{your_project}/MainApplication.java

Cela a fonctionné pour moi :)

J'ai rencontré le même problème, cela se produit sous Android, mais fonctionne bien sous IOS.
Je suppose que ce problème concerne Flipper Network.

Pendant un moment, j'ai commenté
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

dans ce dossier
/android/app/src/main/java/com/{your_project}/MainApplication.java

j'ai testé avec ce son alors j'ai pu télécharger le fichier

merci @alfianwahid

La mise à niveau de flipper vers 0.46.0 résout le problème !

Dans
android\gradle.properties

Ce problème m'a pris plus de 5 heures à résoudre. J'étais sur le point d'abandonner quand j'ai finalement pu résoudre le problème.

Le problème auquel je faisais face et qui est proche de ce que vous mentionnez est que j'obtenais NetworkError lorsque j'utilisais expo-image-picker et que j'essayais de télécharger le fichier en utilisant axios . Cela fonctionnait parfaitement sous iOS mais ne fonctionnait pas sous Android.

C'est ainsi que j'ai résolu le problème.

Il y a deux questions indépendantes en action ici. Disons que nous obtenons imageUri de image-picker, alors nous utiliserons ces lignes de code suivantes pour télécharger depuis le frontend.

const formData = new FormData();
formData.append('image', {
 uri : imageUri,
 type: "image",
 name: imageUri.split("/").pop()
});

Le premier problème concerne le imageUri lui-même. Si disons que le chemin de la photo est /user/.../path/to/file.jpg . Ensuite, le sélecteur de fichiers dans Android donnerait la imageUri comme file:/user/.../path/to/file.jpg alors que le sélecteur de fichiers dans iOS donnerait la imageUri comme file:///user/.../path/to/file.jpg .

La solution pour le premier problème est d'utiliser file:// au lieu de file: dans le formData dans Android.

Le deuxième problème est que nous n'utilisons pas le type mime approprié. Cela fonctionne bien sur iOS mais pas sur Android. Ce qui aggrave la situation, c'est que le package de sélection de fichiers donne le type de fichier en tant que "image" et qu'il ne donne pas le type MIME approprié.

La solution consiste à utiliser le type mime approprié dans le formData dans le champ type . Ex : le type mime pour le fichier .jpg serait image/jpeg et pour le fichier .png serait image/png . Nous n'avons pas à le faire manuellement. Au lieu de cela, vous pouvez utiliser un package npm très célèbre appelé mime .

La solution de travail finale est :

import mime from "mime";

const newImageUri =  "file:///" + imageUri.split("file:/").join("");

const formData = new FormData();
formData.append('image', {
 uri : newImageUri,
 type: mime.getType(newImageUri),
 name: newImageUri.split("/").pop()
});

J'espère que cela aide à résoudre votre problème. :)

Lorsque vous avez une erreur réseau avec formData, vous devez vérifier l'exactitude de formData. C'est très important.

android/gradle.propriétés
mettre à niveau Fliper
FLIPPER_VERSION=0.41.0

Les personnes qui sont toujours confrontées à des problèmes peuvent faire comme ça

let data = new FormData();

data.append('action', 'AJOUTER');
data.append('param', 0);
data.append('secondParam', 0);
data.append('file', new Blob([payload], { type: 'text/csv' }));

// cela marche
let request = new XMLHttpRequest();
request.open('POST', url);
request.send(data);

ça marchera (:+1: (:100:

On dirait que beaucoup de gens ont pu contourner ce problème en mettant à jour leur version flipper. Qui est super. Mais aussi beaucoup de gens ont souffert pour trouver ce problème et se débloquer.

Alors question : qu'est-ce qui faciliterait la découverte de cela ? Problème épinglé ? Un problème fermé (puisqu'il semble résolu ?) Est-il toujours détectable ? Lien de débordement de pile ? Il semble que cela soit résolu, mais nous ne voulons pas que les gens continuent à perdre du temps à essayer de trouver une solution connue.

Cela devrait être fermé dès que la mise à niveau atterrira - https://github.com/facebook/react-native/pull/29033. Jusqu'à ce que cela se produise, nous pouvons envisager de l'épingler.

J'ai toujours le même problème après la mise à jour de la version flipper à 0.46.0

Moi aussi ayant le même problème. Quelqu'un s'il vous plaît aidez-nous

  const imageUrl = 'http://febbler.com/20150425_114106.jpg';
    // if (true) {
    // const fileToUpload = res;
    const formData = new FormData();
    formData.append('name', 'Image Upload');
    formData.append('file_attachment', {
        uri: imageUrl,
        type: "image/jpeg",
        name: 'floral-spring-natural-landscape-wild-260nw-1274207287.jpg'
    });
    Axios({
        url: URL + '/VideosController/upload',
        method: 'POST',
        data: formData,
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'multipart/form-data'
        },
    }).then(
        response => {
            alert('res' + JSON.stringify(response.data));
        },
        error => {
            alert('check+ ' + error);
            console.warn(error);
        })
        .catch(error => {
            alert('No error' + error);
        });

Je ne sais pas ce que j'ai fait de mal quelqu'un peut-il m'aider à réparer ??

Si j'ai mis à jour FLIPPER_VERSION=0.41.0, l'application elle-même ne s'ouvre même pas.

Peut-être que cela aide quelqu'un qui a encore des problèmes avec cela.
Utilisez-vous les stratégies WAF (Web Application Firewall) de Microsoft ? Si c'est le cas; ils ont un bogue (ou React Native, je ne sais pas exactement qui est à blâmer) qui bloque les requêtes avec un similaire Mais seulement parfois, et uniquement sur iOS. La limite de formulaire en plusieurs parties qui est générée au niveau le plus bas dans RN contient parfois des caractères (probablement un . ) que les stratégies bloquent.

Cela nous coûte plusieurs jours pour comprendre. Microsoft l'a reconnu. Nous avons désactivé la politique WAF associée pour contourner le problème. Cela ne se produit pas dans PostMan par exemple. Cela génère une limite différente de celle de RN.

Mise à niveau du flipper vers 0.44.0 et React-native 0.63.0, j'ai toujours le même problème

Je l'ai corrigé en commentant une ligne dans le
/android/app/src/debug/java/com/{nom-de-votre-application}/ReactNativeFlipper.java
fichier.
ce n'est que le correctif qui a fonctionné pour moi!

new NetworkingModule.CustomClientBuilder() {
@Passer outre
public void apply(OkHttpClient.Builder builder) {
// builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
}
});

Si vous avez tout essayé ci-dessus et que rien ne vous aide, et que vous utilisez le sélecteur d'images et les données de formulaire, essayez d'ajouter ceci dans les options du sélecteur d'images :
``` js
laisser options = {
titre : 'Sélectionner une image',
aucune donnée : vrai,
maxLargeur : 500,
hauteur max : 500,
} ;
ImagePicker.showImagePicker(options, réponse => {
.
.

Form data should look like this then:

```js
 const formData = new FormData();
        formData.append('avatar', {
          uri: response.uri, 
          name: response.fileName,
          type: 'image/jpeg',
        });

J'ai rencontré le même problème, cela se produit sous Android, mais fonctionne bien sous IOS.
Je suppose que ce problème concerne Flipper Network.

Pendant un moment, j'ai commenté
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

dans ce dossier
/android/app/src/main/java/com/{your_project}/MainApplication.java

J'ai eu le même problème dans mon projet avec la version 0.62 de react-native.
J'ai mis à jour le flipper à "0.41.0" et cela a fonctionné.
Dans gradle.propriétés
FLIPPER_VERSION=0.41.0

Ces deux travaux pour moi. Mais n'utilisez qu'une seule solution. Merci à tous les deux. @alfianwahid @dmobisoft
Pensez FLIPPER_VERSION=0.41.0 meilleure solution.

Est-ce que quelqu'un des développeurs natifs de React est au courant de ce problème tremblant, car toute personne avec MANAGED WORKSPACE (ex. Expo) est incapable de mettre en œuvre les "solutions" proposées avec le hack RN Flipper. Des solutions proposées de votre part pour les espaces de travail gérés tels que Expo?

Salut @Hiti3 , je suggérerais de créer un problème sur le référentiel Expo ici : https://github.com/expo/expo , car les solutions ici ne s'appliqueraient pas à un espace de travail géré.

cc @brentvatne

@Hiti3 - cela n'a pas d'impact sur les applications d'exposition gérées car le flipper n'y est pas intégré. si vous voyez cette erreur, c'est pour d'autres raisons que celles mentionnées dans ce problème, et votre meilleur plan d'action si vous ne parvenez pas à trouver une solution est de créer un mcve et de le publier sur https://github.com/ expo/expo/questions

Pour moi également, cela ne fonctionne pas en donnant une erreur [TypeError: Network request failed]

CODE :

nom d'utilisateur const = this.state.values.username ;
const nom de famille = this.state.values.lastname ;
const images_path=this.state.images_list[0].url.uri ;

                    const data = new FormData();
                   // data.append('name', 'Image Upload');
                    data.append('email', email);
                    data.append('username', username);
                    data.append('file',  { uri:images_path, name: 'image.jpg', type: 'image/jpeg/jpg',path:images_path);

                    let res = await fetch(
                        'IP-Address/cowsoncloud/admin/cowRegister.php',{
                        method: 'POST',
                        body: data,
                        headers: {
                            'Accept': "application/json",
                            'Content-Type': 'multipart/form-data',
                        },
                        })
                    .then(response => response.json())
                        .then(responseJson => {
                        console.log('upload succes',+responseJson);
                        alert('Upload success!'+JSON.stringify(responseJson));
                        })
                        .catch(error => {
                        console.log('upload error', error);
                        alert('Upload failed!'+error);
                        });

                    } else {
                    alert('Please Select File first');
                    }
                };

Pour moi également, cela ne fonctionne pas en donnant une erreur [TypeError: Network request failed]

CODE :

nom d'utilisateur const = this.state.values.username ;
const nom de famille = this.state.values.lastname ;
const images_path=this.state.images_list[0].url.uri ;

                    const data = new FormData();
                   // data.append('name', 'Image Upload');
                    data.append('email', email);
                    data.append('username', username);
                    data.append('file',  { uri:images_path, name: 'image.jpg', type: 'image/jpeg/jpg',path:images_path);

                    let res = await fetch(
                        'IP-Address/cowsoncloud/admin/cowRegister.php',{
                        method: 'POST',
                        body: data,
                        headers: {
                            'Accept': "application/json",
                            'Content-Type': 'multipart/form-data',
                        },
                        })
                    .then(response => response.json())
                        .then(responseJson => {
                        console.log('upload succes',+responseJson);
                        alert('Upload success!'+JSON.stringify(responseJson));
                        })
                        .catch(error => {
                        console.log('upload error', error);
                        alert('Upload failed!'+error);
                        });

                    } else {
                    alert('Please Select File first');
                    }
                };

Vous avez donné une adresse IP sous forme de chaîne URL est une fois de plus une mauvaise vérification.

quand je poste sans fichier (image), je vais bien fonctionner, quand j'envoie avec un fichier image cette fois-ci montrant une erreur [TypeError: Network request failed] ; ne vous méfiez pas de l'URL

Je l'ai corrigé en commentant une ligne dans le
/android/app/src/debug/java/com/{nom-de-votre-application}/ReactNativeFlipper.java
fichier.
ce n'est que le correctif qui a fonctionné pour moi!

new NetworkingModule.CustomClientBuilder() {
@passer outre
public void apply(OkHttpClient.Builder builder) {
// builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
}
});

Essayez celui-ci a fonctionné pour moi

J'ai aussi le même problème. J'utilise hack pour cela https://github.com/facebook/react-native/issues/29021#issuecomment -662196480.

Si vous avez la version 0.37.0 de flipper, passez-la à la 0.41.0, cela a fonctionné sur la mienne.

J'ai rencontré le même problème, cela se produit sous Android, mais fonctionne bien sous IOS.
Je suppose que ce problème concerne Flipper Network.

Pendant un moment, j'ai commenté
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

dans ce dossier
/android/app/src/main/java/com/{your_project}/MainApplication.java

Merci beaucoup cela a parfaitement fonctionné dans mon projet.
Je veux juste savoir comment avez-vous pu comprendre que l'initialiseur Flipper était la cause du bogue ?

@alfianwahid

Juste pour partager. Pour Android, vous pouvez essayer de mettre à niveau la version de flipper vers 0.41, alors cela fonctionnera bien. Mais pour IOS, je suis toujours confronté au même problème même si la version du flipper IOS est 0.41.5. Donc, pour IOS, je mets à jour manuellement le node_modules/react-native/Libraries/Network/RCTNetworkTask.mm et cela fonctionne maintenant sur IOS.

s'il vous plaît pouvez-vous me dire comment mettre à jour le flipper FLIPPER_VERSION=0.33.1 à 0.41

@sureshhallyali , vous pouvez mettre à jour FLIPPER_VERSION=0.41.0 dans le fichier android/gradle.properties. Après cela, nettoyez la version Android et exécutez à nouveau Android.

Juste pour le partage, j'utilise Flipper 0.50 sur mon Ubuntu et la mise à jour android/gradle.properties à FLIPPER_VERSION=0.50.0 a très bien fonctionné aussi.

J'ai essayé toutes les solutions ci-dessus (de la mise à niveau du flipper au commentaire en passant par la suppression du dossier de débogage et tout), et aucune n'a fonctionné pour moi, je reçois toujours network error bien que l'image soit enregistrée sur le serveur. react-native 0.62.2 , j'essaye depuis 2 jours maintenant, c'est vraiment frustrant...

c'est mon code

let formData = new FormData();

    formData.append('id', hospitalId);
    formData.append('date', dataObj.date);
    formData.append('questions', dataObj.questions);

    dataObj.attachments.forEach((attachment) => formData.append('attachments[]', attachment));

    this.props.submit(formData);

Soumettre (en bref)

try {
      const res = await axios.post(url, formData, {
        headers: {
          Authorization: token ? `Bearer ${token}` : null,
          deviceId: getUniqueId(),
          Accept: 'application/json',
          'Content-Type': `multipart/form-data`,
        },
      });
      console.log('SUBMIT RES >>>> ', res.data);
    } catch (err) {
      console.log('errrr >>>> ', err.response);
      console.log('errrr >>>> ', err);
    }

Ce problème a-t-il été résolu dans 0.63.1 ?

METTRE À JOUR:
Mis à niveau vers 0.63.2 , le problème persiste

Juste pour le partage, j'utilise Flipper 0.50 sur mon Ubuntu et la mise à jour android/gradle.properties à FLIPPER_VERSION=0.50.0 a très bien fonctionné aussi.

@vinifraga , comment tu upgrades la version Flipper sous IOS ? Je sais comment mettre à niveau sur Android mais je ne sais pas comment mettre à niveau depuis ios/podfile là-bas ?

Salut les gars essayez rn-fetch-blob ça marche pour moi
j'utilisais Axios pour télécharger l'image mais cela ne fonctionnait pas pour Android donc après tant de recherches j'ai trouvé ce paquet et cela a fonctionné

Lien ici pour le paquet

J'ai tout essayé (d'autres lib trop rn-fetch-upload, rn-background-upload, ...), le téléchargement d'images ne fonctionne pas sur iOS et c'est bien sur Android. Le téléchargement sur S3 en utilisant une URL pré-signée me renvoyait toujours ceci (fonctionnait bien sur RN -v 0.59.x, et plus sur RN -v 0.61.x :
````
"
EntityTooLarge
Votre téléchargement proposé dépasse la taille maximale autorisée
2025220
2023115
{...}
5n+{...}
"

@MayoudP essayez rn-fetch-blob peut-être que cela fonctionnera

Merci @abumostafa

J'ai essayé toute cette solution mais ne fonctionne pas
1 : besoin d'ajouter
uesCleartextTraffic="true" au fichier AndroidManifest.xml trouvé dans le répertoire android/app/src/main/AndroidManifest.xml
pour manipuler http et https

2 : besoin de commenter
// initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
dans ce fichier /android/app/src/main/java/com/{your_project}/MainApplication.java
3 : besoin de commenter
// builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
int son fichier android/app/src/debug/java/com/{your_project}/ReactNativeFlipper.java
4: quelqu'un a dit que la mise à niveau réagissait nativement à 63.2 qui l'a également fait
5 : mise à niveau de la version FLIPPER vers 50.0

besoin d'essayer maintenant un: rn-fetch-blob
https://github.com/facebook/react-native/issues/29493

3 : besoin de commenter
// builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));

a finalement fonctionné sous Android

L'utilisation rn-fetch-blob pour les appels d'API où les données de formulaire sont nécessaires fonctionne (iOS confirmé, pas encore sûr pour Android), je viens de remplacer mes appels de récupération habituels là-bas (voir le fichier readme):

https://github.com/joltup/rn-fetch-blob

Ce problème persiste-t-il vraiment pendant 4 mois ?

@MayoudP essayez rn-fetch-blob peut-être que cela fonctionnera

Non, cela n'a pas fonctionné, n'a pas réussi à le faire fonctionner en utilisant une URL pré-signée et S3...

Juste pour partager. Pour Android, vous pouvez essayer de mettre à niveau la version de flipper vers 0.41, alors cela fonctionnera bien. Mais pour IOS, je suis toujours confronté au même problème même si la version du flipper IOS est 0.41.5. Donc, pour IOS, je mets à jour manuellement le node_modules/react-native/Libraries/Network/RCTNetworkTask.mm et cela fonctionne maintenant sur IOS.

@anthony1110 Que mettez-vous à jour dans node_modules/react-native/Libraries/Network/RCTNetworkTask.mm ?

@MayoudP essayez rn-fetch-blob peut-être que cela fonctionnera

Non, cela n'a pas fonctionné, n'a pas réussi à le faire fonctionner en utilisant une URL pré-signée et S3...

Juste RNFS fonctionne rn

@andrekovac , vous pouvez suivre ce fil et suivre la solution IOS et Android. https://github.com/facebook/react-native/issues/29021#issuecomment -664030881

L'application du patch @ anthony1110 mentionné ne fonctionne pas pour moi. J'obtiens toujours des erreurs de réseau.

Mais une solution (pour React Native 0.63 ) semble arriver bientôt : https://github.com/facebook/react-native/issues/29364#issuecomment -664526253

@andrekovac , ne suivez pas mon patch, celui-là est un hack. Mauvaise résolution. Vous devez suivre la mise à jour https://github.com/facebook/react-native/issues/29364#issuecomment -663005914 pour le problème IOS.

Celui qui est toujours aux prises avec ce problème. cela se produit à cause du plugin réseau Flipper.
Je l'ai désactivé et tout fonctionne très bien.

Ma solution de contournement pour que cela fonctionne est de commenter la ligne numéro 43

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            <strong i="9">@Override</strong>
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

dans ce fichier android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

j'essaie ça et ça marche à 100%

Celui qui est toujours aux prises avec ce problème. cela se produit à cause du plugin réseau Flipper.
Je l'ai désactivé et tout fonctionne très bien.

Ma solution de contournement pour que cela fonctionne est de commenter la ligne numéro 43

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            <strong i="9">@Override</strong>
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

dans ce fichier android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

ça marche (Y)

Ce bug va me rendre fou
Toutes les solutions ci-dessus ne fonctionnent pas

Hey @victor012888 ont essayé le rn-fetch-blob

J'utilise la méthode de téléchargement FLIPPER_VERSION=0.50.0 finalement résolue
Mon problème est INSTALL_FAILED_INSUFFICIENT_STORAGE car les nouveaux paquets sont trop volumineux
Après avoir ajouté plus de RAM pour la machine virtuelle, tout fonctionne

J'ai tout essayé, j'ai toujours un problème.
non seulement la version de débogage, mais la version finale.

J'ai résolu mon problème maintenant!
①mise à jour FLIPPER_VERSION=0.52.0 dernière

②formData code comme celui-ci
laissez formData = new FormData();
this.state.pics.map((valeur,index) => {
console.log(valeur)
console.log(index)
let file = { uri:value.uri , type: 'multipart/form-data', name:value.uri.substr (value.uri.length-10,10)} ;
formData.append('fichier'+index,fichier)
})

type doit être 'multipart/form-data' , identique à l'en-tête de message.


l'espoir peut aider quelqu'un

J'utilise la méthode de téléchargement FLIPPER_VERSION=0.50.0 finalement résolue
Mon problème est INSTALL_FAILED_INSUFFICIENT_STORAGE car les nouveaux paquets sont trop volumineux
Après avoir ajouté plus de RAM pour la machine virtuelle, tout fonctionne

comment mettre à jour FLIPPER

J'ai ce problème, j'ai démarré sur RN63+ et je n'ai pas de flipper. Flipper est complètement désinstallé.

Cela ne se produit également que pour les téléchargements de fichiers avec multipart/form-data , le type est défini. Mais la demande est ignorée à chaque fois sur Android.

Bonjour, j'utilise expo 38 avec RN 0.62.2
J'utilise le flux de travail nu, donc je peux modifier le code natif.
J'ai les mêmes problèmes même si j'ai essayé tous les correctifs répertoriés:

  • Mise à jour de Flipper dans gradle.properties à 0.52.0
  • commenté la ligne initializeFlipper dans MainApplication.java
  • J'ai essayé toutes les configurations possibles pour le type de paramètre formData 'file'.

Mon code ressemble à ceci

export const createFileUploadFormData = (file, body) => {
  const isAndroid = Platform.OS === 'android'
  const fileUri = isAndroid ? file.uri : file.uri.replace('file://', '')
  const fileType = mime.getType(fileUri) || file.type
  const formData = new FormData()
  formData.append('file', {
    name: file.fileName,
    type: fileType,
    uri: fileUri,
  })
  if (body && body.length) {
    Object.keys(body).forEach((key) => {
      formData.append(key, body[key])
    })
  }
  return formData
}

Une idée de ce que je pourrais manquer ?

Malheureusement, les solutions de contournement mentionnées concernant les commentaires des lignes de code Flipper et autres n'ont pas fonctionné pour moi.

J'ai réussi à faire fonctionner cela en utilisant rn-fetch-blob .

Vous trouverez ci-dessous un morceau de code montrant comment j'ai utilisé cette bibliothèque pour télécharger un fichier pdf :

const response = await RNFetchBlob.fetch(
  'POST',
  'http://192.168.0.20:3000/files',
  {
    Accept: 'application/json',
    'Content-Type': 'multipart/form-data',
  }, [
    {
      name: 'file',
      originalname: 'avataroriginalname',
      filename: 'avatar.pdf',
      type: 'application/pdf',
      data: RNFetchBlob.wrap(<path-to-file>),
    },
  ]
)

J'ai rencontré le même problème, cela se produit sous Android, mais fonctionne bien sous IOS.
Je suppose que ce problème concerne Flipper Network.

Pendant un moment, j'ai commenté
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

dans ce dossier
/android/app/src/main/java/com/{your_project}/MainApplication.java

Bro son travail parfaitement, merci 👍

Bonjour, j'utilise expo 38 avec RN 0.62.2
J'utilise le flux de travail nu, donc je peux modifier le code natif.
J'ai les mêmes problèmes même si j'ai essayé tous les correctifs répertoriés:

  • Mise à jour de Flipper dans gradle.properties à 0.52.0
  • commenté la ligne initializeFlipper dans MainApplication.java
  • J'ai essayé toutes les configurations possibles pour le type de paramètre formData 'file'.

[...]

Ahhhh j'ai trouvé ce qui me manquait !
Dans mon cas, je fournissais le mauvais en-tête à mon appel de récupération, en raison d'un ancien copier-coller>.<
j'utilisais

const headers = {
  Accept: 'application/json',
  'Content-Type': 'application/json',
}

alors qu'il aurait dû être :

const headers = {
    Accept: 'application/json',
    'Content-Type': 'multipart/form-data',
  }

La partie délicate est que :

  1. cette erreur fonctionne sur iOS
  2. il avait toujours été comme tel sur Android pendant des mois sans aucun problème pour télécharger des fichiers

Il semble que depuis les dernières mises à jour de RN, de telles erreurs ne soient plus tolérées sous Android.

J'ai rencontré le même problème, cela se produit sous Android, mais fonctionne bien sous IOS.
Je suppose que ce problème concerne Flipper Network.

Pendant un moment, j'ai commenté
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

dans ce dossier
/android/app/src/main/java/com/{your_project}/MainApplication.java

J'obtenais stream closed en essayant de télécharger sur S3 avec XHR et cela résout le problème et merci 👍

J'ai mis à jour Flipper vers la version 0.51.2 et cela a fonctionné pour moi.

J'ai mis à jour Flipper vers la version 0.51.2 et cela a fonctionné pour moi.

Bonjour @omid-ebrahimi, comment avez-vous mis à jour la version Flipper ?

Merci

même problème 0.63.2

J'ai mis à jour Flipper vers la version 0.51.2 et cela a fonctionné pour moi.

Bonjour @omid-ebrahimi, comment avez-vous mis à jour la version Flipper ?

Merci

Allez à android/gradle.properties et ajoutez cette ligne

FLIPPER_VERSION=0.52.1

Vous devriez avoir les lignes suivantes dans votre android/app/build.gradle :

dependencies {
    // ....

    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
      exclude group:'com.facebook.fbjni'
    }

    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
    }

    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
    }

    // ...
}

J'ai mis à jour Flipper vers la version 0.51.2 et cela a fonctionné pour moi.

Bonjour @omid-ebrahimi, comment avez-vous mis à jour la version Flipper ?
Merci

Allez à android/gradle.properties et ajoutez cette ligne

FLIPPER_VERSION=0.52.1

Vous devriez avoir les lignes suivantes dans votre android/app/build.gradle :

dependencies {
    // ....

    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
      exclude group:'com.facebook.fbjni'
    }

    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
    }

    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
    }

    // ...
}

@omid-ebrahimi la mise à niveau du flipper résout également le problème merci, et j'ai ouvert un problème à ce sujet sur StackOverflow avec la prime, veuillez soumettre cette réponse là-bas et je peux vous attribuer la prime.

Je mets à jour fliipper vers la version 52.0
et utiliser fetch et cela a fonctionné pour moi
Mais quand utiliser axios.post ne fonctionne pas
Et lorsque vous utilisez des axios comme
axios({ method:'post , data : file , url:'something ',............. })
ça marche bien

Et ne définissez pas d'en-tête
'Content-Type': 'multipart/form-data'
aussi ça marchera bien

Celui qui est toujours aux prises avec ce problème. cela se produit à cause du plugin réseau Flipper.
Je l'ai désactivé et tout fonctionne très bien.

Ma solution de contournement pour que cela fonctionne est de commenter la ligne numéro 43

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            <strong i="9">@Override</strong>
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

dans ce fichier android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

@abumostafa La solution que vous avez fournie est efficace, mais elle ne fonctionne toujours pas pour les fichiers commençant par "file:///".
Par exemple:

  • Cela peut fonctionner : formData.append('files', {uri:'https://xxx.jpg', type:'image/jpeg', name:'test.jpeg' })
  • Cela ne fonctionne pas : formData.append('files', {uri:'file:///xxx.jpg', type:'image/jpeg', name:'test.jpeg' })

Ma version native de réaction:

"dependencies": {
    "react": "^16.11.0",
    "react-native": "^0.62.2"
  }

le même problème a essayé de mettre à jour le flipper mais ne fonctionne pas.

{
 "react": "16.13.1",
  "react-native": "0.63.2",
}

Qu'en est-il d'iOS ?

Avoir ce problème sur iOS également. J'ai essayé de changer la version de Flipper de 0.33.1 à 0.50.0 et au-dessus dans mon Podfile. Cela se passe pour moi sur

{
  "react": "16.11.0",
  "react-native": "0.62.2",
}

La suggestion de @abumostafa l'a fait fonctionner pour Android mais toujours pas en mesure de le faire fonctionner sur iOS.

EDIT : mis à niveau vers react-native: 0.63.2 toujours le même problème.

Changer les versions de Flipper ne fonctionne pas pour moi. J'ai essayé de commenter la ligne, ce qui peut aider, mais j'ai également rencontré le même problème. Ma solution consiste à utiliser une WebView et à injecterJavascript pour effectuer les téléchargements. Ce hack fonctionne bien pour moi.

Ma solution consiste à utiliser <WebView> generateUploadCodes() à injecter du javascript. injecté dans la vue Web.

  function generateUploadCodes(name, data) {
    return `function upload() {
      let formData = new FormData();
      formData.append('file', new Blob(["${data}"], {type: 'text/csv'}));

      let xhr = new XMLHttpRequest();
      xhr.open("post","https://myuploadserver.com");
      xhr.setRequestHeader("Authorization", "Bearer ${accessToken}");
      xhr.responseType = "json";
      xhr.onload = () => {
         window.ReactNativeWebView.postMessage(xhr.response);
      };
      xhr.send(formData);
    }
    upload(); 
    `;
  }

Avec ça, je peux juste appeler

let toInject = generateUploadCodes("mydata.txt", "somedata");
webRef.current.injectJavascript(toInject);

Pour obtenir la réponse du téléchargement, nous pouvons utiliser webview.ReactNativeWebView.postMessage('our response'); . Ensuite, traitez la réponse via le gestionnaire onMessage de WebView.

Avant tout cela, nous devons d'abord créer notre ref et notre composant WebView comme ceci

  const webview = useRef(null);

  <WebView
        ref={webview}
        source={{html: 'hi'}}
        injectedJavaScript={''}
        javaScriptEnabledAndroid={true}
        javaScriptEnabled={true}
        onMessage={event => {
              console.log(event.nativeEvent.data);
        }}
      />

En rassemblant tous les correctifs ici, j'espère que nous pourrons bientôt obtenir un correctif pour cette fusion avec le noyau :

iOS : Rétablir un PR, nécessite la modification de node_modules : https://github.com/facebook/react-native/issues/29364#issuecomment -671565181, PR soumis ici pour le correctif : https://github.com/facebook/react -native/pull/29595

Android : mise à niveau de la version Flipper https://github.com/facebook/react-native/issues/28551#issuecomment -674351386, PR soulevé https://github.com/facebook/react-native/pull/29787

Si quelqu'un rencontre toujours un problème dans la version 0.62 ou supérieure de RN, la solution est la suivante :
Vous devez indiquer l'uri, le nom et le type de média que vous téléchargez.

formData.append('media_incident', {
          uri: image.path,
          type: image.mime,
          name: 'filename.jpg',
        });

Allez ensuite à la ligne numéro 43 et commentez cette ligne :
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
sur android/app/src/debug/java/com/"nom du projet"/ReactNativeFlipper.java

J'ai passé près de 8 heures à chercher la solution à l'erreur.

Si quelqu'un rencontre toujours un problème dans la version 0.62 ou supérieure de RN, la solution est la suivante :
Vous devez indiquer l'uri, le nom et le type de média que vous téléchargez.

formData.append('media_incident', {
          uri: image.path,
          type: image.mime,
          name: 'filename.jpg',
        });

Allez ensuite à la ligne numéro 43 et commentez cette ligne :
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
sur android/app/src/debug/java/com/"nom du projet"/ReactNativeFlipper.java

J'ai passé près de 8 heures à chercher la solution à l'erreur.

Oui, c'était le cas pour moi aussi, confirmez-le ici : https://github.com/facebook/react-native/issues/29364#issuecomment -679370449

PR de mise à niveau de Flipper soulevé par FB https://github.com/facebook/react-native/pull/29787

En rassemblant tous les correctifs ici, j'espère que nous pourrons bientôt obtenir un correctif pour cette fusion avec le noyau :

iOS : Rétablir un PR, nécessite la modification de node_modules : https://github.com/facebook/react-native/issues/29364#issuecomment -671565181, PR soumis ici pour le correctif : https://github.com/facebook/react -native/pull/29595

Android : mise à niveau de la version Flipper https://github.com/facebook/react-native/issues/28551#issuecomment -674351386, PR soulevé https://github.com/facebook/react-native/pull/29787

J'avais le même problème et aucune des solutions ici n'a fonctionné pour moi.

Ce qui a fonctionné, c'est qu'il me manque juste le mime_type de mon téléchargement.

Assurez-vous d'avoir ces données correctement :

  • uri
  • Nom
  • taper

A travaillé avec la mise à niveau de flipper vers FLIPPER_VERSION=0.52.1 .

Changez dans ce fichier - android/gradle.properties et exécutez yarn android .

fetch

let uriParts = this.state.pickedFileUri.split('.');
let fileType = uriParts[uriParts.length - 1];
const file = {
            uri: this.state.pickedFileUri, // works with fileurl like file:///.....
            name: `myFile.${fileType}`,
            type: `text/${fileType}`,
        };

const data = new FormData();
data.append('file', file);
return fetch(url, {
        method: 'POST',
        body: data,
});

package.json

   "react": "16.11.0",
    "react-native": "0.62.2",

Existe-t-il une solution de contournement pour cela en utilisant Expo?

quelqu'un résout ce problème ? essayez déjà toutes les méthodes comme commenter une commande flipper, mettre à niveau flipper sur graddle.properties, même si je rétrograde mon RN de 0,63 à 0,62, j'ai toujours cette erreur. Déjà bloqué sur cette erreur depuis 2 jours. Lorsque j'essaie de publier des données sans fichier sur mon API, cela fonctionne bien, mais lorsque j'essaie de télécharger un fichier comme une image sur mon API, j'ai ces erreurs

@safaiyeh n'a toujours pas fonctionné pour moi monsieur, j'ai déjà tout essayé.

Si quelqu'un rencontre toujours un problème dans la version 0.62 ou supérieure de RN, la solution est la suivante :
Vous devez indiquer l'uri, le nom et le type de média que vous téléchargez.

formData.append('media_incident', {
          uri: image.path,
          type: image.mime,
          name: 'filename.jpg',
        });

Allez ensuite à la ligne numéro 43 et commentez cette ligne :
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
sur android/app/src/debug/java/com/"nom du projet"/ReactNativeFlipper.java

J'ai passé près de 8 heures à chercher la solution à l'erreur.

j'ai fait la même chose, mais toujours face au même problème. j'utilise
"réagir": "16.13.1",
"react-native": "0.63.1",

@sadhruva J'ai le même environnement que vous et cela a résolu le problème pour moi

Je rencontre le même problème. Ce type d'erreurs est frustrant car nous ne pouvons pratiquement rien faire d'autre que d'attendre une version corrigée.

J'ai essayé:

  • Commentant la ligne sur le fichier java

  • Changer ma version de flipper

  • Écrire le code de 2 manières différentes

Et ça ne marche toujours pas. La chose étrange est que le formulaire fonctionne dans d'autres parties de mon application, mais sur cet écran particulier, cela ne fonctionne pas (uniquement sur Android, car sur iPhone, cela fonctionne comme prévu).

Donc, il semble que la seule chose que je puisse faire pour le moment est de continuer le développement pour iOS uniquement et de retarder la sortie d'Android.

La vie c'est la vie... je suppose.

Je rencontre le même problème. Ce type d'erreurs est frustrant car nous ne pouvons pratiquement rien faire d'autre que d'attendre une version corrigée.

J'ai essayé:

  • Commentant la ligne sur le fichier java
  • Changer ma version de flipper
  • Écrire le code de 2 manières différentes

Et ça ne marche toujours pas. La chose étrange est que le formulaire fonctionne dans d'autres parties de mon application, mais sur cet écran particulier, cela ne fonctionne pas (uniquement sur Android, car sur iPhone, cela fonctionne comme prévu).

Donc, il semble que la seule chose que je puisse faire pour le moment est de continuer le développement pour iOS uniquement et de retarder la sortie d'Android.

La vie c'est la vie... je suppose.

Je rencontre le même problème.Cependant, il est étrange que la même fonction fonctionne correctement avec React. Je suis donc allé vérifier les packages réseau et j'ai découvert que mon package de demande réseau React WebAPP était accompagné d'un en-tête content- type:multipart/form-data , tandis que RN va avec content -type:application/form-data .
J'ai donc édité ma fonction de requête comme ceci:
await fetch(url, { method: 'POST', headers: { 'Content-Type': 'multipart/form-data', }, body: formData, })
Ensuite, incluez le type et le nom dans le formData
let formData = new FormData(); formData.append('file', {uri: fileUri,type:fileType,name:fileName});
Je ne sais pas pourquoi, mais ça marche miraculeusement.

j'utilise la version native de réaction 0.63.2 et j'ai suivi ces étapes pour résoudre le problème
en utilisant react-native-cli

1 - en android/app/src/main/java/com/{yourProject}/MainApplication.java
commentaire -> initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

2 - en android/app/src/debug/java/com/{yourProject}/ReactNativeFlipper.java
commentaire à la ligne 43 -> builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));

3 - en android/gradle.properties
changer FLIPPER_VERSION=0.37.0 en FLIPPER_VERSION=0.52.1

4 - en android/app/build.gradle
remplacer les dépendances actuelles de Flipper par

  dependencies {
    // ....

    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
      exclude group:'com.facebook.fbjni'
    }

    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
    }

    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
    }

    // ...
  }

et après toutes ces étapes -> npx react-native run-android ou yarn android

5 - dans ma demande de post upload

  const data = new FormData();
  // Android need to add "file:///" to work

  const path =
    Platform.OS === 'android' ? `file:///${image?.path}` : image?.path;

    const file = { // use name, type, uri as object keys
      name: image?.fileName,
      type: image?.type,
      uri: path,
    };


    data.append('file', file);

    // using axios
    const response = await api.post(
          'apiurl',
          data,
          {
            headers: {
              Authorization: `Bearer ${token}`,
            },
          },
        );

J'espère que cela t'aides

@ mathrocha12100 pouvez-vous s'il vous plaît formater correctement votre commentaire ? Certains codes semblent être hors de propos, je pourrais essayer de le faire étape par étape.

Le problème est que je ne veux vraiment pas gâcher la configuration pour Android. Quoi qu'il en soit, veuillez formater votre réponse correctement pour aider tous ceux qui rencontrent ce problème (y compris moi).

Acclamations.

Ne fonctionne toujours pas.

@dlogvin
J'ai rencontré ce problème hier et je l'ai corrigé comme @omid-ebrahimi l'a dit [upgrade Flipper], plus commentez cette ligne
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); à ReactNativeFlipper.java

Nettoyer les dossiers de construction [ios, android]
puis reconstruisez ça marche bien pour moi :)

@dlogvin
J'ai rencontré ce problème hier et je l'ai corrigé comme @omid-ebrahimi l'a dit [upgrade Flipper], plus commentez cette ligne
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); à ReactNativeFlipper.java

Nettoyer les dossiers de construction [ios, android]
puis reconstruisez ça marche bien pour moi :)

Comment améliorez-vous exactement le flipper ?

edit : j'ai déjà essayé de remplacer la version FLIPPER et de commenter les lignes, mais toujours rien. En fait, dans la version de débogage de l'application, les images ne se chargent pas après avoir commenté les lignes. C'est un gâchis complet...

@dlogvin dans android/gradle.properties
changer FLIPPER_VERSION=0.37.0 en FLIPPER_VERSION=0.52.1

voici la version réactive et réactive native si vous vous demandez

 "react": "16.13.1",
  "react-native": "0.63.2",

@anastely je l'ai fait... toujours rien :(

J'abandonne...

@dlogvin J'ai essayé de charger des images à partir du serveur et c'est chargé, donc je suis désolé :(

si votre projet est open source, je peux le vérifier

Je m'excuse, mais le projet n'est pas open source. J'ai essayé de télécharger des fichiers, le formulaire fonctionne dans d'autres écrans, mais dans celui-ci, ce n'est pas le cas. Je vais devoir attendre la mise à jour de RN, en attendant je vais juste travailler sur la version iPhone et garder la version Android en BETA.

travail pour moi je change la version de flipper dans le fichier gradle.setting FLIPPER_VERSION=0.30.2 en FLIPPER_VERSION=0.52.1 puis nettoie gradlew et lance le projet.
en réaction native, utilisez la méthode XMLHttpRequest.
export let dataWithImage = async (endPoint, params) => {
laissez jeton = attendre AsyncStorage.getItem('token');
laissez xhr = new XMLHttpRequest();
laissez formData = new FormData();
for (laissez saisir les paramètres) {
formData.append(clé, params[clé]);
}
xhr.withCredentials = true ;
xhr.addEventListener('readystatechange', function () {
si (this.readyState === 4) {
console.log(this.responseText, '===> c'est la réponse');
}
});
xhr.open('POST', url + endPoint);
xhr.setRequestHeader('Autorisation', 'Porteur ' + jeton);
xhr.send(formData);
} ;

Je suis confronté à un problème similaire avec une requête POST sur mon serveur (HTTPS), fonctionne bien pour iOS mais pas sur Android. J'ai essayé de désactiver le flipper et de le mettre à jour et j'ai toujours le même problème. Essayé avec un autre serveur, comme (https://jsonplaceholder.typicode.com/) et semble fonctionner comme prévu.

La description de l'erreur ne me dit pas trop "Erreur réseau", Déjà vérifié les autorisations Internet et défini android:usesCleartextTraffic= "true" sur le manifeste Android.

Même problème avec fetch ou axios.

Pour IOS dans
fichier node_modules/react-native/Libraries/Image/RCTLocalAssetImageLoader.mm

Remplacer ci-dessous

  • -(RCTImageLoaderCancellationBlock)loadImageForURL :(NSURL *)imageURL
    taille:(CGSize)taille
    échelle:(CGFloat)échelle
    resizeMode:(RCTResizeMode)resizeMode
    progressHandler:(RCTImageLoaderProgressBlock)progressHandler
    gestionnaire de chargement partiel :(RCTImageLoaderBloc de chargement partiel)gestionnaire de chargement partiel
    CompletionHandler :(RCTImageLoaderCompletionBlock)completionHandler
    {
    UIImage *image = RCTImageFromLocalAssetURL(imageURL);
    si (image) {
    si (progressHandler) {
    progressHandler(1, 1);
    }
    CompletionHandler(néant, image);
    } autre {
    NSString *message = [NSString stringWithFormat :@"Impossible de trouver l'image %@", imageURL] ;
    RCTLogWarn(@"%@", message);
    CompletionHandler(RCTErrorWithMessage(message), nil);
    }

    retour nul ;
    }

Avec

  • -(RCTImageLoaderCancellationBlock)loadImageForURL :(NSURL *)imageURL
    taille:(CGSize)taille
    échelle:(CGFloat)échelle
    resizeMode:(RCTResizeMode)resizeMode
    progressHandler:(RCTImageLoaderProgressBlock)progressHandler
    gestionnaire de chargement partiel :(RCTImageLoaderBloc de chargement partiel)gestionnaire de chargement partiel
    CompletionHandler :(RCTImageLoaderCompletionBlock)completionHandler
    {
    __block auto annulé = std::make_shared<:atomic i="44">>(false) ;
    RCTExecuteOnMainQueue(^{
    if (annulé->load()) {
    retourner;
    }

    UIImage *image = RCTImageFromLocalAssetURL(imageURL);
    si (image) {
    si (progressHandler) {
    progressHandler(1, 1);
    }
    CompletionHandler(néant, image);
    } autre {
    NSString *message = [NSString stringWithFormat :@"Impossible de trouver l'image %@", imageURL] ;
    RCTLogWarn(@"%@", message);
    CompletionHandler(RCTErrorWithMessage(message), nil);
    }
    });

    retour ^{
    annulé->store(true);
    } ;
    }

Ce..

Aimez et aimez, si ça marche 👍

Salut à tous un correctif vient d'être fusionné au master : https://github.com/facebook/react-native/commit/d8b70b19b39ead4dd41895d666d116a43c56474e

Il y avait aussi un correctif iOS déjà validé dans master.

J'ai mis une demande de portage arrière ici : https://github.com/react-native-community/releases/issues/203#issuecomment -695052285, attendez-vous à ce que cela soit en 0.63.3 ou 0.64

@safaiyeh Je suis extatique en ce moment par ce commentaire que vous avez ajouté. J'espère remettre la main sur le développement d'Android dès que possible.

Acclamations.

Merci beaucoup.

Ouais, content que tout le monde ait bientôt la solution 🙇‍♂️ ça a été un peu mouvementé pour moi aussi de chasser les bonnes personnes et autres. Se rapprocher!

Merci, je l'attends.
Pour l'instant, j'utilise la même solution de contournement faite par @ mathrocha12100.

Je suis confronté à un problème similaire sur iOS. Pas particulier aux fichiers, mais sur iOS, mes appels API échouent de manière aléatoire, la même requête API fonctionnera une fois, une autre fois échouera avec une réponse indéfinie.
sur android ça marche bien tout le temps
J'utilise axios 0.19.2, j'ai essayé de récupérer mais le même résultat
Réagir natif 0.62.2

@vajid-khan avez-vous confirmé que le problème se situe du côté frontal ? Essayez d'utiliser postman ou Insomnia pour vérifier si c'est votre backend, votre code natif réactif ou s'il s'agit du framework lui-même. Je n'ai rencontré aucun problème avec les demandes des autres API.

@dlogvin oui j'ai confirmé avec le facteur. Avec le facteur, je reçois une réponse à chaque fois, même Android fonctionne tout le temps. Je suis confronté à cela uniquement sur iOS

@dlogvin oui j'ai confirmé avec le facteur. Avec le facteur, je reçois une réponse à chaque fois, même Android fonctionne tout le temps. Je suis confronté à cela uniquement sur iOS

@vajid-khan c'est un peu bizarre. Ce problème spécifique est basé sur les demandes de méthodes POST avec des fichiers. Autant faire du débogage, probablement des en-têtes ou quelque chose comme ça.

@dlogvin oui j'ai confirmé avec le facteur. Avec le facteur, je reçois une réponse à chaque fois, même Android fonctionne tout le temps. Je suis confronté à cela uniquement sur iOS

@vajid-khan c'est un peu bizarre. Ce problème spécifique est basé sur les demandes de méthodes POST avec des fichiers. Autant faire du débogage, probablement des en-têtes ou quelque chose comme ça.

Je confirme son problème, je l'ai également rencontré dans "ios" après la mise à niveau de Flipper vers 0.54.0 comme @safaiyeh l'a mentionné dans PR !


Éditer:
Lorsque j'ouvre xCode et que j'envoie la demande, je peux le voir dans les journaux

[native] Missing request token for request: <NSURLRequest: 0x600000dda4e0> { URL: file:///Users/anastely/Library/Developer/CoreSimulator/Devices/13C4E525-8577-44A3-A5F3-F6693B9CDFF6/data/Containers/Data/Application/FD4541BF-805A-4420-9AF3-0A9A55854126/tmp/react-native-image-crop-picker/7E060441-D875-4883-BD34-89872ECB3CB7.jpg }

J'ai donc obtenu ceci après avoir recherché # https://github.com/facebook/react-native/commit/31980094107ed37f8de70972dbcc319cc9a26339
Et le remplacer comme ils l'ont dit,
la demande de poste fonctionne dans certains cas !
Dans mon application, j'envoie une image dans la demande de publication, si je choisis une image de celle _par défaut dans le simulateur,_ la demande n'a reçu aucune réponse _'ne fonctionne pas comme avant'_ mais le problème ci-dessus a disparu,
Alors je ne sais pas ce qui se passe !
Si quelqu'un ici peut tester ce boîtier dans son appareil physique et nous le faire savoir !

@ mathrocha12100 merci beaucoup, votre réponse résout mon problème

Même problème, j'ai essayé tout ce qui est dit ici ! Ne fonctionne toujours pas!

Essaye ça

let formData = new FormData();
formData.append('file', {
     name: filename,
     uri: uri // For android the path should start like this "content://". If uri starts with "file://", replace with "content://" 
     type: type
}
axios.post(URL, formData, { headers: { 'Content-Type': 'multipart/form-data'}})

Essaye ça

let formData = new FormData();
formData.append('file', {
     name: filename,
     uri: uri // For android the path should start like this "content://". If uri starts with "file://", replace with "content://" 
     type: type
}
axios.post(URL, formData, { headers: { 'Content-Type': 'multipart/form-data'}})

Ce n'est pas le problème. Les autres formulaires de mon application fonctionnent, sauf un spécifique. Ce n'est pas un problème de chemin.

Essaye ça

let formData = new FormData();
formData.append('file', {
     name: filename,
     uri: uri // For android the path should start like this "content://". If uri starts with "file://", replace with "content://" 
     type: type
}
axios.post(URL, formData, { headers: { 'Content-Type': 'multipart/form-data'}})

Ce n'est pas le problème. Les autres formulaires de mon application fonctionnent, sauf un spécifique. Ce n'est pas un problème de chemin.

Oui, une autre méthode de publication fonctionnera, à l'exception du téléchargement de fichiers, car elle est liée à Flipper. Changez la version de Flipper en 0.58 et exécutez gradlew clean dans le dossier Android. Pour moi, après cela, seul le passage à content:// fonctionne pour moi sinon donne une erreur de réseau.

@safaiyeh Une mise à jour à ce sujet ?
Je veux sortir mon App :(

Celui qui est toujours aux prises avec ce problème. cela se produit à cause du plugin réseau Flipper.
Je l'ai désactivé et tout fonctionne très bien.

Ma solution de contournement pour que cela fonctionne est de commenter la ligne numéro 43

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            <strong i="9">@Override</strong>
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

dans ce fichier android/app/src/debug/java/com/**/ReactNativeFlipper.java

Toujours un problème dans React Native 0.63. Cette solution a fonctionné pour moi.

Même problème, j'ai essayé tout ce qui est dit ici ! Ne fonctionne toujours pas!
La première étape de @ mathrocha12100 a résolu mon problème !
android/app/src/main/java/com/{yourProject}/MainApplication.java comment -> initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

Même problème ici!

Première tentative de correction du problème :

mettre à jour Flipper à 0.46.0 (n'a pas fonctionné)
mettre à jour Flipper à 0.52.0 (n'a pas fonctionné)
commentaire sur la ligne 43 de ReactNativeFlipper.java (n'a pas fonctionné)
supprimez le dossier de débogage dans android / app / src / debug (n'a pas fonctionné)

Versions installées dans mon projet :

"réagir": "16.13.1",
"react-native": "0.63.2",
"axios": "^ 0.20.0",

Nous avons besoin d'une solution urgente

Même problème ici!

Première tentative de correction du problème :

mettre à jour Flipper à 0.46.0 (n'a pas fonctionné)
mettre à jour Flipper à 0.52.0 (n'a pas fonctionné)
commentaire sur la ligne 43 de ReactNativeFlipper.java (n'a pas fonctionné)
supprimez le dossier de débogage dans android / app / src / debug (n'a pas fonctionné)

Versions installées dans mon projet :

"réagir": "16.13.1",
"react-native": "0.63.2",
"axios": "^ 0.20.0",

Nous avons besoin d'une solution urgente

Je suis absolument d'accord avec cela... nous avons besoin d'une solution PERMANENTE urgente. Cela retarde mon projet, autrement dit, cela me touche beaucoup. Ça devient vraiment embêtant, l'attente devient de plus en plus longue. Quand sort la mise à jour ?

Merci à tous pour votre patience ! Le correctif a été publié avec la version 0.63.3, assurez-vous d'annuler tout travail autour de vous et de mettre à niveau correctement !

Assurez-vous également de nettoyer votre build gradle.

Si de nouveaux problèmes surviennent, veuillez créer un nouveau problème 🎉🤟😁

Merci à tous pour votre patience ! Le correctif a été publié avec la version 0.63.3, assurez-vous d'annuler tout travail autour de vous et de mettre à niveau correctement !

Assurez-vous également de nettoyer votre build gradle.

Si de nouveaux problèmes surviennent, veuillez créer un nouveau problème 🎉🤟😁

Mis à jour, toujours le même problème. Devrions-nous changer les gradle.properties ? le mien indique FLIPPER_VERSION=0.33.1

Mise à jour : modification de la version de Flipper en : 0.54.0 , ne fonctionne toujours pas.

les personnes qui n'ont suivi aucun type de correctif fourni ci-dessus et qui ont mis à niveau, veuillez confirmer s'il ne s'agit pas d'un problème que je rencontre moi-même. Cela n'a pas résolu le problème. @murilokrugner ??

@dlogvin J'ai annulé les modifications et mis à jour vers la version 63.3 mais cela n'a toujours pas fonctionné, devons-nous mettre à jour Flipper vers une version ?

Dans mon projet Flipper est en version : 0.37.0

Ensuite, la mise à jour n'a pas fonctionné.

@safiyeh

La mise à jour n'a pas fonctionné.

C'est une question simple, juste un téléchargement et cela ne fonctionne pas. Ouvrons un nouveau sujet

C'est une question simple, juste un téléchargement et cela ne fonctionne pas. Ouvrons un nouveau sujet

C'est une question simple qu'il est URGENT de régler. De nombreuses applications sont concernées par cela, le téléchargement de fichiers est indispensable pour de nombreux services.

Nous devrions certainement ouvrir un nouveau sujet.

Vous pouvez l'utiliser pour le diff complet https://react-native-community.github.io/upgrade-helper/

Vous pouvez l'utiliser pour le diff complet https://react-native-community.github.io/upgrade-helper/

Déjà utilisé, rien n'y fait.

C'est peut-être une question stupide :"D
Mais comment mettre à niveau vers la dernière version 0.63.3 ?
en utilisant helper et copier-coller dif?

C'est peut-être une question stupide :"D
Mais comment mettre à niveau vers la dernière version 0.63.3 ?
en utilisant helper et copier-coller dif?

npx react-native upgrade essayez, mais je suis sûr à 99,99 % que le "correctif" ne fonctionnera pas.

J'ai mis à jour mon projet de 63.2 à 63.3 et Flipper de 0.37.0 à 0.54.0

Mais ça ne marche toujours pas

Est-ce que je fais quelque chose de mal?

Après la mise à niveau vers 0.63.3

J'ai eu des problèmes étranges dans iOS lorsque je choisis une image à partir de l'image du système de fichiers et que j'envoie la demande ne fonctionne pas ! mais quand je télécharge une image au hasard, réessayez, ça marche très bien !! "Simulateur 13.3"

Android fonctionne très bien ;)

Donc, le problème n'a pas encore été résolu.

Les téléchargements de fichiers ne sont pas une chose dans cette nouvelle version.

Veuillez rouvrir le problème @safaiyeh

Ouvrons un nouveau sujet. Avec un minimum de repro avec le dernier react natif.

Un pour @anastely problème ios et

Problème Android @dlogvin .

Merci de me taguer sur le sujet.

Toutes les solutions que j'ai trouvées sur internet, jusqu'à présent aucune n'a fonctionné.

Je suis confronté à ce problème depuis la version 0.62 de React Native.

J'avais un projet dans lequel je devais télécharger des fichiers mais le délai était court, donc l'alternative était de convertir le fichier en une chaîne Base64 et de l'envoyer au backend.

Cependant, la résolution de ce problème est extrêmement urgente.

Toutes les solutions que j'ai trouvées sur internet, jusqu'à présent aucune n'a fonctionné.

Je suis confronté à ce problème depuis la version 0.62 de React Native.

J'avais un projet dans lequel je devais télécharger des fichiers mais le délai était court, donc l'alternative était de convertir le fichier en une chaîne Base64 et de l'envoyer au backend.

Cependant, la résolution de ce problème est extrêmement urgente.

Je suis d'accord, il s'agit d'un problème critique qui affecte TOUTES les applications qui utilisent les téléchargements de fichiers.

@safaiyeh oui, je vais ouvrir un sujet. Fera quand je rentre à la maison.

Les gars, je ne l'achète pas. Ça a marché!

Solution qui a fonctionné pour moi : j'ai mis à jour React Native en 0.63.3 et Flipper en 0.54.0, mais cela ne fonctionnait toujours pas.

J'ai redémarré l'émulateur Android et l'ai rouvert. et ça a marché !!

Merci à tous!

Les gars, je ne l'achète pas. Ça a marché!

Solution qui a fonctionné pour moi : j'ai mis à jour React Native en 0.63.3 et Flipper en 0.54.0, mais cela ne fonctionnait toujours pas.

J'ai redémarré l'émulateur Android et l'ai rouvert. et ça a marché !!

Merci à tous!

Intéressant, la chose est... J'ai construit l'application pour la sortie... testée sur un appareil physique, même chose. J'ai essayé d'utiliser l'apk de débogage, même erreur "erreur réseau".

Pas encore résolu. Ouvrira le problème bientôt.

Les gars, je ne l'achète pas. Ça a marché!

Solution qui a fonctionné pour moi : j'ai mis à jour React Native en 0.63.3 et Flipper en 0.54.0, mais cela ne fonctionnait toujours pas.

J'ai redémarré l'émulateur Android et l'ai rouvert. et ça a marché !!

Merci à tous!

Veuillez essayer de l'exécuter sur un périphérique physique lors du débogage et de la version de version, s'il vous plaît

Les gars, je ne l'achète pas. Ça a marché!
Solution qui a fonctionné pour moi : j'ai mis à jour React Native en 0.63.3 et Flipper en 0.54.0, mais cela ne fonctionnait toujours pas.
J'ai redémarré l'émulateur Android et l'ai rouvert. et ça a marché !!
Merci à tous!

Veuillez essayer de l'exécuter sur un périphérique physique lors du débogage et de la version de version, s'il vous plaît

@dlogvin Cela fonctionne aussi sur un appareil physique, je crois que c'est quelque chose en cache

Les gars, je ne l'achète pas. Ça a marché!
Solution qui a fonctionné pour moi : j'ai mis à jour React Native en 0.63.3 et Flipper en 0.54.0, mais cela ne fonctionnait toujours pas.
J'ai redémarré l'émulateur Android et l'ai rouvert. et ça a marché !!
Merci à tous!

Veuillez essayer de l'exécuter sur un périphérique physique lors du débogage et de la version de version, s'il vous plaît

@dlogvin Cela fonctionne aussi sur un appareil physique, je crois que c'est quelque chose en cache

Je suis content que ce soit résolu pour vous, mais de mon côté... j'ai même essayé une construction propre, toujours pas de chance...

Si quelqu'un rencontre toujours un problème dans la version 0.62 ou supérieure de RN, la solution est la suivante :
Vous devez indiquer l'uri, le nom et le type de média que vous téléchargez.

formData.append('media_incident', {
          uri: image.path,
          type: image.mime,
          name: 'filename.jpg',
        });

Allez ensuite à la ligne numéro 43 et commentez cette ligne :
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
sur android/app/src/debug/java/com/"nom du projet"/ReactNativeFlipper.java

J'ai passé près de 8 heures à chercher la solution à l'erreur.

Après avoir essayé tous les hacks discutés ci-dessus, c'est celui qui m'a sauvé la journée. Merci beaucoup!

la mise à niveau vers 0.63.3 a finalement fonctionné pour moi

dans mon cas, auparavant, ce code de formulaire de téléchargement fonctionnait correctement :

form.append('file', {
    uri: file,
    type: filetype,
    name: filename,
})

puis j'ai installé d'autres dépendances, puis l'erreur réseau est renvoyée.
j'ai donc dû changer le type avec un préfixe explicite:

form.append('file', {
    uri: file,
    type: 'audio/' + filetype,
    name: filename,
})

RN 63.3 a corrigé ce problème. Ça marche!

mise à niveau vers 63.3 résolu pour moi aussi

Nan..

RN 63.3 fonctionne essentiellement parce que sa version flipper utilise 0.54.0.
Si la RN 63.3 ne fonctionne toujours pas, nous devons vérifier
Android:
FLIPPER_VERSION dans le fichier android/gradle.properties
iOS :
installation du pod --repo-update

J'utilise RN 0.63.3 et j'ai mis à jour FLIPPER_VERSION à 0.54.0 mais cela ne fonctionne toujours pas. Une autre solution disponible ?

l'a-t-il fait, ce n'est pas à cause de la version flipper, j'utilise react -native 0.62.2 et la version flipper: 0.33.1, commenté la ligne 43 dans android/app/src/debug/java/com/maxyride/app/ drivers/ReactNativeFlipper.java et assurez-vous que le type de téléchargement est correctement spécifié,

Nous devrions utiliser ces outils pour passer à RN 63.3. Assurez-vous que chaque fusion est correcte.
https://react-native-community.github.io/upgrade-helper/

RÉSOLU !
Modifiez la version de react navite dans package.json :
"réagir natif": "0.63.3"
Sur ANDROID :
android/gradle.propriétés
Modifier la version de Flipper :
FLIPPER_VERSION=0.54.0
Après cela, désinstallez l'application sur l'appareil et exécutez à nouveau le projet. :)
Étapes IOS :
https://react-native-community.github.io/upgrade-helper/ (il suffit de sélectionner la dernière version de RN ou d'utiliser 0.63.3)

Peut-être que cela sauvera quelqu'un. Une erreur similaire s'est produite (ne téléchargez pas de fichiers !!!) avec toutes les requêtes réseau. Dans mon cas, le problème était dans le certificat ssl de mon serveur https. La durée du certificat expiré, et c'était la cause de l'erreur.

RN : 0,61,5

J'ai essayé tout ce qui était suggéré dans ce fil et j'ai cherché partout des suggestions et rien. Enfin, j'ai compris le problème. Peut-être que cela aidera quelqu'un d'autre.

C'était en fait ma faute... J'appelais le sélecteur d'image dans un composant enfant. L'utilisateur y a sélectionné des images. Cliquez sur Enregistrer, ce qui les a renvoyés au composant précédent. Ils rempliraient un formulaire et les images seraient téléchargées après avoir rempli le formulaire.

Le problème était, dans le composant enfant, j'ai appelé ImagePicker.clear() . C'était un peu berry donc je ne l'ai pas vu tout de suite. J'ai eu la même "erreur réseau impossible de lire le fichier pour uri" que tout le monde a eu, donc je pense que pour mon cas spécifique, j'ai été très induit en erreur en pensant qu'il y avait un autre problème.

Je suppose que la bonne chose est que j'ai fini par mettre à niveau ma version native de réaction, flipper et Gradle vers la dernière version. Alors il y a ça. Par contre j'ai perdu 3 jours à cause de ça. La programmation est bizarre.

Si quelqu'un rencontre toujours un problème dans la version 0.62 ou supérieure de RN, la solution est la suivante :
Vous devez indiquer l'uri, le nom et le type de média que vous téléchargez.

formData.append('media_incident', {
          uri: image.path,
          type: image.mime,
          name: 'filename.jpg',
        });

Allez ensuite à la ligne numéro 43 et commentez cette ligne :
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
sur android/app/src/debug/java/com/"nom du projet"/ReactNativeFlipper.java
J'ai passé près de 8 heures à chercher la solution à l'erreur.

Après avoir essayé tous les hacks discutés ci-dessus, c'est celui qui m'a sauvé la journée. Merci beaucoup!

Ne travaille pas

A été mal guidé par un message sur Internet qui indiquait que la partie file:// sur le chemin pour Android devrait être supprimée avant de la définir sur l'URI pour les données du formulaire. Utiliser le chemin tel quel et supprimer le builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); comme mentionné ci-dessus, a fonctionné pour moi pour réagir la version 0.62.2 pour Android et ios

j'ai toujours le problème, en utilisant RN 0.63.3 flipper 0.54.0, le téléchargement de photos est correct mais lors du téléchargement de la vidéo, il y a une erreur de réseau, j'utilise une autre méthode comme @murilokrugner l' a dit, car mon délai est court aussi

j'ai toujours le problème, en utilisant RN 0.63.3 flipper 0.54.0, le téléchargement de photos est correct mais lors du téléchargement de la vidéo, il y a une erreur de réseau, j'utilise une autre méthode comme @murilokrugner l' a dit, car mon délai est court aussi

pour vous les gars si vous avez toujours ce problème j'ai des solutions simples:

  1. installez rn-fetch-blob suivez leurs instructions https://github.com/joltup/rn-fetch-blob
  2. puis suivez cette instruction https://github.com/joltup/rn-fetch-blob#multipartform -data-example-post-form-data-with-file-and-data

le mien fonctionne bien

@abumostafa tu es une légende. Merci beaucoup.

Quiconque est toujours confronté à ce problème avec la version 0.63.3 et le plus récent flipper - remplacez la récupération par XMLHttpRequest. Fonctionne parfaitement bien.

Toujours face au même problème en utilisant :
RN 0.63.3
batteur 0.54.0

J'ai commenté la ligne 43 dans android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

Toujours le même problème, j'ai essayé presque tout ne fonctionnait pas.

Partager ma solution consiste à décoder avec la caméra en base64 puis à l'envoyer sur le serveur dans ce format. Je suis complètement déçu de voir qu'en 2020, certaines fonctionnalités minuscules et simples qui sont promues par les développeurs, ne fonctionnent tout simplement pas pendant... des années.

TLDR : Si vous rencontrez des problèmes pour envoyer un fichier, essayez de le convertir en base64 et de l'envoyer.

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