React-native: React Native 0.62.* [TypeError: solicitud de red fallida] en la carga del archivo

¡El mismo problema aqui!

El mismo problema !! ¡Estoy atascado en este problema desde los últimos 2 días! busque casi todo..

Debe agregar este uesCleartextTraffic="true" al archivo AndroidManifest.xml que se encuentra dentro del directorio _android/app/src/main/AndroidManifest.xml_

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

De acuerdo con los documentos

Cuando el atributo se establece en "falso", los componentes de la plataforma (por ejemplo, las pilas HTTP y FTP, DownloadManager y MediaPlayer) rechazarán las solicitudes de la aplicación para usar tráfico de texto no cifrado. Se recomienda encarecidamente que las bibliotecas de terceros respeten esta configuración también. La razón clave para evitar el tráfico de texto claro es la falta de confidencialidad, autenticidad y protección contra la manipulación; un atacante de la red puede espiar los datos transmitidos y también modificarlos sin ser detectado.

Debe agregar este uesCleartextTraffic ="true" al archivo AndroidManifest,xml que se encuentra dentro del directorio android/app/src/main

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

De acuerdo con los documentos

Cuando el atributo se establece en "falso", los componentes de la plataforma (por ejemplo, las pilas HTTP y FTP, DownloadManager y MediaPlayer) rechazarán las solicitudes de la aplicación para usar tráfico de texto no cifrado. Se recomienda encarecidamente que las bibliotecas de terceros respeten esta configuración también. La razón clave para evitar el tráfico de texto claro es la falta de confidencialidad, autenticidad y protección contra la manipulación; un atacante de la red puede espiar los datos transmitidos y también modificarlos sin ser detectado.

ya lo he probado Esto se usa cuando realiza una solicitud a un servidor http, pero mi servidor se ejecuta en https. Funcionaba perfectamente antes de actualizar a 0.62.
Algo está mal.

Todas las demás solicitudes están funcionando perfectamente. Solo las cargas de archivos ya no funcionan.

Todas las demás solicitudes están funcionando perfectamente. Solo las cargas de archivos ya no funcionan.

Enfrenté demasiados problemas cuando intenté actualizar a 0.62 a pesar de que creé una nueva aplicación y moví mi código a ella. Regresé a 0.61.5 hasta que se estabilice :/

Estoy enfrentando el mismo problema, para RN 0.62.0 y 0.62.1 arroja este error: Network request filed .
Todas las solicitudes funcionan excepto la publicación de la imagen.

Volví a 0.61.5 :( No queda otra opción por ahora. Si alguien necesita ayuda para cambiar a 0.61.5, consulte react-native-upgrade-helper.

¡Aquí pasa lo mismo!

Enfrenté el mismo problema, sucede en Android, pero funciona bien en IOS.
Supongo que este tema sobre Flipper Network.

Por un tiempo, comenté
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

en este archivo
/android/app/src/main/java/com/{your_project}/MainApplication.java

Este problema también ocurre por mi parte, y adivinen qué ocurre solo en el modo de depuración. Intenté construir en internalRelease y funciona bien. Supongo que se debe a la recarga automática/rápida en el modo de depuración que aplica alguna comunicación flipper que parece estar relacionada con este problema.

Otro problema aquí es que no hay ningún error en el logcat de Android. También pasé algunos días investigando cómo solucionar este problema y aún no tuve suerte.

Quien todavía está luchando con este problema. está sucediendo debido al complemento de red Flipper.
Lo deshabilité y las cosas funcionan bien.

Mi solución para que esto funcione es comentar la línea número 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);

en este archivo android/app/src/debug/java/com/**/ReactNativeFlipper.java

Gracias por el tema @abumostafa. ¿Ocurre esto en una plantilla React Native nueva lista para usar? Si es así, debe revisarse, de lo contrario, siéntase libre de cerrarlo.

Gracias por el tema @abumostafa. ¿Ocurre esto en una plantilla React Native nueva lista para usar? Si es así, debe revisarse, de lo contrario, siéntase libre de cerrarlo.

Esto todavía ocurre en la última plantilla React Native nueva 0.62.1

Gracias por el tema @abumostafa. ¿Ocurre esto en una plantilla React Native nueva lista para usar? Si es así, debe revisarse, de lo contrario, siéntase libre de cerrarlo.

Esto todavía ocurre en la última plantilla React Native nueva 0.62.1

@safaiyeh
Puedo confirmar. Todavía está sucediendo en la última plantilla nativa de reacción fresca 0.62.1

Quien todavía está luchando con este problema. está sucediendo debido al complemento de red Flipper.
Lo deshabilité y las cosas funcionan bien.

Mi solución para que esto funcione es comentar la línea número 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);

en este archivo android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

Todavía sucede en 0.62.2, y esto soluciona temporalmente el problema en Android

@abumostafa

*Prueba esto *

intente implementar "rn-fetch-blob"

````
importar RNFetchBlob desde "rn-fetch-blob";

RNFetchBlob.fetch('POST',, {
Aceptar: 'aplicación/json',
'Tipo de contenido': 'multipart/form-data',}, [
{ nombre: 'imagen de perfil', nombre de archivo: this.state.filePath.fileName, datos: RNFetchBlob.wrap(this.state.filePath.uri) },
{ nombre: 'uid', datos: uidy },
{ nombre: 'dob', datos: este.estado.fDOB},
{ nombre: 'número de teléfono', datos: este.estado.pnumber},
{ nombre: 'dirección', datos:este.estado.dirección},
{ nombre: 'género', datos: este.estado.esgénero},
{ nombre: 'nombre de usuario', datos: this.state.fulname}
// tipo de contenido personalizado
]).entonces((res) => {
consola.log(res)
ResponseHelper.success('Actualizado');
this.setState ({está comenzando: falso})
})
.catch((error) => {
this.setState ({está comenzando: falso})
ResponseHelper.success('Problema con el servidor, inténtalo de nuevo');
consola.log('err', error);
})
````

esto resolverá tu problema

RNFetchBlob.wrap

Gracias. Tengo una pregunta. ¿Esta función RNFetchBlob.wrap está convirtiendo el archivo en base64 ?

Quien todavía está luchando con este problema. está sucediendo debido al complemento de red Flipper.
Lo deshabilité y las cosas funcionan bien.

Mi solución para que esto funcione es comentar la línea número 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);

en este archivo android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

Gracias @abumostafa Esta solución alternativa me ahorró mucho tiempo. Ya pasé mucho tiempo en el error de carga de archivos y luego obtuve su problema. Por cierto, ¿sabías que el problema está solucionado o no?

Hice ping al equipo de Flipper, el trabajo para esto se rastreará aquí: https://github.com/facebook/flipper/issues/993

Probé las dos soluciones propuestas por @abumostafa y @alfianwahid; Traté de bajar a 0.61.5; Traté de implementar con fetch (estoy usando axios); ninguno funcionó. Estoy usando la versión 0.62.1

Probé las dos soluciones propuestas por @abumostafa y @alfianwahid; Traté de bajar a 0.61.5; Traté de implementar con fetch (estoy usando axios); ninguno funcionó. Estoy usando la versión 0.62.1

¿Intentaste reconstruir la aplicación después de los cambios?

@abumostafa No sé si lo hice bien. Pero eliminé la carpeta node_modules , yarn.lock , ejecuté los comandos ./gradlew clean y ./gradlew cleanBuildCache y ejecuté npx react-native run-android nuevamente.

Estoy experimentando el mismo problema en este momento en RN 0.61.4 y axios 0.19.2. También intenté comentar initializeFlipper(this); cleanBuildCache y aún obtuve Network Error .

abra la carpeta android y busque el archivo ReactNativeFlipper.java y
comenta la linea numero 43
// builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));

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

En mi caso, no tengo ese archivo en mi proyecto.

En mi caso, no tengo ese archivo en mi proyecto.
¿Tienes la carpeta de Android?
si tiene búsqueda dentro de la carpeta de la aplicación

RNFetchBlob.wrap

Gracias. Tengo una pregunta. ¿Esta función RNFetchBlob.wrap está convirtiendo el archivo en base64 ?

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

Lo mismo aquí, por ejemplo, intentar fetch("https://www.mocky.io/v2/5185415ba171ea3a00704eed") genera un TypeError: Network request failed .
Ocurre solo en Android, tanto en la depuración como en el lanzamiento, y tanto con depuración remota como sin ella.
Agregar android:usesCleartextTraffic="true" no ayudó (pero de todos modos es para solicitudes que no son SSL).
Utilizando RN 0.62.2.

Editar: ¡obtener https://jsonplaceholder.typicode.com/todos/1 funciona! ¡¿Cómo pueden funcionar algunos sitios y otros no?!

Actualización, después de hacer algunas pruebas , llegamos a la conclusión de que se debe a fallas en los certificados SSL. No sabemos cuál es el problema con estos, pero el problema también ocurre en Postman con la opción "Verificación de certificado SSL" habilitada. ¿Será que la autoridad certificadora no está en la lista del teléfono?

Acabo de pasar el último día luchando con este problema. El prefijo de mi ruta absoluta con "archivo: //" para que termine con tres / solucionó el problema para mí.

Una ruta de ejemplo:

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

Ejemplo de mi código:

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

estoy usando react-native@^0.62.2

¿Se ha publicado la solución? ¿Cómo actualizamos?

Todavía lo obtengo en 0.62.2, ¿hay alguna actualización sobre esto?

Quien todavía está luchando con este problema. está sucediendo debido al complemento de red Flipper.
Lo deshabilité y las cosas funcionan bien.
Mi solución para que esto funcione es comentar la línea número 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);

en este archivo android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

Todavía sucede en 0.62.2, y esto soluciona temporalmente el problema en Android

Esto lo arregla por ahora.

Quien todavía está luchando con este problema. está sucediendo debido al complemento de red Flipper.
Lo deshabilité y las cosas funcionan bien.

Mi solución para que esto funcione es comentar la línea número 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);

en este archivo android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

¡esto hizo mi dia! funciona bien con RN 0.62.0. ¡gracias!

Flipper ha publicado una actualización, consulte el último comentario https://github.com/facebook/flipper/issues/993#issuecomment -619823916 ¿React-native publicará una actualización para reflejar esta corrección?

Todavía obtengo un Network request failed con ese nuevo Flipper 0.39.0 cuando intento fetch("https://www.mocky.io/v2/5185415ba171ea3a00704eed") , aunque funciona en Chrome/Firefox/Safari.

@antoinerousseau Es posible que desee decirlo allí... No lo he probado.

@aprilmintacpineda Publiqué en https://github.com/facebook/react-native/issues/26939 en cambio, parece más relacionado, y no estoy seguro si está relacionado con Flipper.

Este problema se resuelve actualizando Flipper en este archivo

/yourproject/android/gradle.properties Línea 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
Ver :
https://github.com/facebook/flipper/issues/993#issuecomment -619823916

tengo el mismo problema con reaccionar 0.61.4

Gracias @alfianwahid
Resolvió mi problema.

¿Podemos cerrar este ticket?

A mí también me ayudó 💪

@abumostafa , gracias hermano, eso salvó mi búsqueda de 48 horas

¿Podemos cerrar este ticket?

Estoy confundido. ¿Por qué desea cerrar este problema si solo encontró una solución alternativa y el problema no se solucionó?

Hola a todos, también probé con axios y fetch pero nada de esto funcionó, también intenté comentar la línea Flipper y actualizarla pero tampoco tiene efecto. Si todavía tienen problemas con esto, mejor intenten hacer su solicitud POST con XMLHttpRequest , funcionó para mí.
Espero eso ayude.

Este problema también ocurre por mi parte, y adivinen qué ocurre solo en el modo de depuración. Intenté construir en internalRelease y funciona bien. Supongo que se debe a la recarga automática/rápida en el modo de depuración que aplica alguna comunicación flipper que parece estar relacionada con este problema.

Otro problema aquí es que no hay ningún error en el logcat de Android. También pasé algunos días investigando cómo solucionar este problema y aún no tuve suerte.

¿Cómo lo resolviste? @trglairnarra

Estoy enfrentando el mismo problema, para RN 0.62.0 y 0.62.1 arroja este error: Network request filed .
Todas las solicitudes funcionan excepto la publicación de la imagen.

Aquí igual. ¿Cómo lo resolviste? Mi aplicación funciona bien en el modo de lanzamiento, pero no en el modo de compilación

Quien todavía está luchando con este problema. está sucediendo debido al complemento de red Flipper.
Lo deshabilité y las cosas funcionan bien.

Mi solución para que esto funcione es comentar la línea número 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);

en este archivo android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

Salvaste mi día . Muchas gracias :) Pero, ¿es seguro hacerlo para futuras compilaciones?

Hola, todavía tengo el problema en 62.2.
Soluciones probadas

1. android:usesCleartextTraffic="true" => Incluso todas las demás API funcionan, también tengo HTTP.
2. comentando la línea número 43
3. no hay problema con "archivo: //", => incluso sin agregar la imagen, solo agregamos los datos del formulario json y aún obtenemos el mismo error.

Hola, todavía tengo el problema en 62.2.
Soluciones probadas

1. android:usesCleartextTraffic="true" => Incluso todas las demás API funcionan, también tengo HTTP.
2. comentando la línea número 43
3. no hay problema con "archivo: //", => incluso sin agregar la imagen, solo agregamos los datos del formulario json y aún obtenemos el mismo error.

@jamisonrachford intenta hacer tu solicitud con XMLHttpRequest

Este problema se resuelve actualizando Flipper en este archivo

/yourproject/android/gradle.properties Línea 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

Ver :
facebook/flipper#993 (comentario)

hacer manualmente FLIPPER_VERSION=0.41.0 en lugar de usar FLIPPER_VERSION=0.33.1 predeterminado con RN 0.62.2 hace que la compilación falle (imagen adjunta). ¿Me estoy perdiendo un paso en la actualización de la versión flipper?

Estoy usando expo. ¿Como puedo resolver esto?

Este problema se resuelve actualizando Flipper en este archivo

/yourproject/android/gradle.properties Línea 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

Ver :
facebook/flipper#993 (comentario)

¡Muchas gracias!

Este problema se resuelve actualizando Flipper en este archivo

/yourproject/android/gradle.properties Línea 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

Ver :
facebook/flipper#993 (comentario)
¡Gracias!
Este problema me molestó durante dos días.

Estoy usando el cliente expo, ¿tiene que haber una solución para eso? Estoy buscando días y no logro el éxito, ¿alguien puede ayudarme a cómo podemos lograr esto en la exposición?

@ Hiti3 También estoy usando expo. Yo también estoy buscando una solución. Lo que estoy haciendo ahora es enviar una cadena base64 (sin formData) y decodificarla en el lado del servidor:

exposición
`importar * como ImagePicker desde 'expo-image-picker';

// selector de imagen
exportar asíncrono predeterminado () => {
const permiso = esperar ImagePicker.requestCameraRollPermissionsAsync();
if (permiso.concedido === 'falso') return 'denegado';
const options = { allowEditing: true, base64: true };
const resultado = ImagePicker.launchImageLibraryAsync(opciones);
resultado devuelto;
};
`

Lado del servidor
`
const agudo = require('agudo');
exportaciones.uploadImage = asíncrono (req, res, siguiente) => {
const { imagen } = req.cuerpo;
constante {
tipo: tipo de imagen,
nombre: nombre de la imagen,
base64: imagenBase64,
ruta: ruta de la imagen,
cambiar el tamaño,
} = imagen;

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

var img = nuevo búfer (base64Data, 'base64');
const ruta = __dirname + ./../../public/${imagePath}/${imageName} ;

si (cambiar el tamaño) {
tratar {
esperar agudo (img)
.redimensionar(500, 500)
.toFormat('jpeg')
.jpeg({ calidad: 90 })
.toFile(ruta);
} atrapar (err) {
console.log('escribir error', err);
}
}
si (! cambiar el tamaño) {
tratar {
await sharp(img).toFormat('jpeg').jpeg({ calidad: 90 }).toFile(ruta);
} atrapar (err) {
console.log('escribir error', err);
}
}
req.image = { imageType, imageName, imagePath };
próximo();
};
`

Ayuda, ayudó. Si tiene algún problema, por favor envíeme un mensaje.

Gracias por la solución proporcionada, esto funciona según lo probado, solo quiero
estar seguro de nuevo antes de abandonar el barco y perder un día tal vez. Y usted es
subir video o imagen si entiendo bien?

El martes 19 de mayo de 2020, 21:44 Gustavo Leite Silvano, [email protected]
escribió:

@ Hiti3 https://github.com/Hiti3 También estoy usando expo. yo tambien estando
buscando una solución. Lo que estoy haciendo ahora es enviar una cadena base64 (no
formData) y decodificándolo en el lado del servidor:

exposición
`importar * como ImagePicker desde 'expo-image-picker';

// selector de imagen
exportar asíncrono predeterminado () => {
const permiso = esperar ImagePicker.requestCameraRollPermissionsAsync();
if (permiso.concedido === 'falso') return 'denegado';
const options = { allowEditing: true, base64: true };
const resultado = ImagePicker.launchImageLibraryAsync(opciones);
resultado devuelto;
};
`

Lado del servidor
`
const agudo = require('agudo');
exportaciones.uploadImage = asíncrono (req, res, siguiente) => {
const { imagen } = req.cuerpo;
constante {
tipo: tipo de imagen,
nombre: nombre de la imagen,
base64: imagenBase64,
ruta: ruta de la imagen,
cambiar el tamaño,
} = imagen;

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

var img = nuevo búfer (base64Data, 'base64');
const ruta = __dirname + ./../../public/${imagePath}/${imageName};

si (cambiar el tamaño) {
tratar {
esperar agudo (img)
.redimensionar(500, 500)
.toFormat('jpeg')
.jpeg({ calidad: 90 })
.toFile(ruta);
} atrapar (err) {
console.log('escribir error', err);
}
}
si (! cambiar el tamaño) {
tratar {
await sharp(img).toFormat('jpeg').jpeg({ calidad: 90 }).toFile(ruta);
} atrapar (err) {
console.log('escribir error', err);
}
}
req.image = { imageType, imageName, imagePath };
próximo();
};
`

Ayuda, ayudó. Si tiene algún problema, por favor envíeme un mensaje.

—
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/facebook/react-native/issues/28551#issuecomment-631041471 ,
o darse de baja
https://github.com/notifications/unsubscribe-auth/ACGFH2MSYJ2J5YDRASXISOTRSLOQFANCNFSM4MCRHIRA
.

0.41.0

Muchas gracias.

Este problema se resuelve actualizando Flipper en este archivo
/yourproject/android/gradle.properties Línea 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

Ver :
facebook/flipper#993 (comentario)

¡Muchas gracias!

@ Hiti3 Solo imagen. Pero creo que también puedes subir videos.

Gracias @alfianwahid
pero yo solía
FLIPPER_VERSION=0.44.0

Solía ​​​​tener el mismo problema, probé todo y me quedé con esto durante 4-5 días, luego uso el paquete RN-FETCH-BLOB, realmente resolvió el problema de enviar los archivos. utilízalo nunca te arrepentirás

Después de aplicar las dos correcciones anteriores, sigo recibiendo un error en la solicitud de red. En mi caso, el archivo se actualiza en el servidor pero da el error.

puede ser un problema de la forma en que envía los datos

puede ser un problema de la forma en que envía los datos

lo estoy investigando Pero si el método de envío no es correcto, ¿por qué los datos se actualizan en el servidor?

Probé todas las soluciones pero no tuve éxito en Android. estoy usando 0.62.2

@tamangsuresh Oye, ¿encontraste una solución para esto?

@Brianop ningún hombre

gracias dicho para actualizar flipper, lo resolvi

Hola, alguien resolvio el problema?, estoy enfrentando el mismo problema.

Oye, alguien ha solucionado este problema? , también estoy enfrentando el mismo problema.
Necesita actualizar Flipper a la última

@liyuewen tengo flipper mejorado en el proyecto RN y flipper también. Pero ningún éxito.

@liyuewen También tengo la actualización de la aleta y la aleta en el proyecto RN. Pero sin ningún éxito.

Después de la actualización, debe borrar el caché de Android

@liyuewen Yo también he hecho eso. Pero no hubo suerte.

Este problema se resuelve actualizando Flipper en este archivo

/yourproject/android/gradle.properties Línea 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

Ver :
facebook/flipper#993 (comentario)
En mi proyecto, la versión flipper está disponible en esta ubicación D:myProjectnode_modulesreact-nativetemplateandroidgradle.properties. He actualizado flipper en el gradle en esta ubicación y las otras gradle.properties que se encuentran en /myProject/android/gradle.properties. Además, los datos se actualizan en el servidor y los he probado en Postman y también funcionan bien en Postman. También he comentado el código dicho por @abumostafa

@liyuewen Yo también hice eso. Pero sin suerte.

Mi versión es "react native": "^ 0.62.2", que es exitosa en el futuro

Actualizando Flipper a 0.45, soluciona el problema

No estoy usando Flipper en ninguna parte, sigo teniendo el mismo problema :(

No estoy usando Flipper en ninguna parte, sigo teniendo el mismo problema :(

Lo mismo aquí, usando Expo. Esto no debería ser un problema para muchas personas, especialmente cuando se usa un espacio de trabajo administrado donde la función se presenta de manera ambigua como una función de trabajo.

Alguien tiene actualizaciones sobre este tema. He intentado actualizar flipper, comentando flipper en actividad principal. Todavía tengo este problema en Android.
Devuelve [TypeError: solicitud de red fallida].
Pero el mismo código funciona bien en iOS

Alguien tiene actualizaciones sobre este tema. He intentado actualizar flipper, comentando flipper en actividad principal. Todavía tengo este problema en Android.
Devuelve [TypeError: solicitud de red fallida].
Pero el mismo código funciona bien en iOS

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

Eliminar esta línea en MainApplication.java funciona. El problema sigue ahí en la compilación de depuración. pero funciona en la versión de lanzamiento.

Alguien tiene actualizaciones sobre este tema. He intentado actualizar flipper, comentando flipper en actividad principal. Todavía tengo este problema en Android.
Devuelve [TypeError: solicitud de red fallida].
Pero el mismo código funciona bien en iOS

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

Eliminar esta línea en MainApplication.java funciona. El problema sigue ahí en la compilación de depuración. pero funciona en la versión de lanzamiento.

Gracias, nunca intenté probar en la versión de lanzamiento. Lo intentaré hoy.

Tengo react-native v59. Entonces, ¿qué pueden hacer las personas que no usan el Flipper? ¿Hay alguna actualización?

Aquí están todos los datos relevantes que podría pensar en extraer de mi aplicación. Estoy experimentando el mismo problema, en el simulador de iOS.

RN 0.62.2, Flipper 0.46.0, en una aplicación Expo expulsada.

  // 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: solicitud de red fallida
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
emit@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@[código nativo]

Info.plist está configurado para permitir solicitudes de host local.

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

Mi paquete.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/(.*))"
    ]
  }
}

Y mi 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

Tengo react-native v59. Entonces, ¿qué pueden hacer las personas que no usan el Flipper? ¿Hay alguna actualización?

No tuve este problema en versiones anteriores. Su problema podría ser algo diferente, creo. ¿Estás usando la URL https?

Tengo react-native v59. Entonces, ¿qué pueden hacer las personas que no usan el Flipper? ¿Hay alguna actualización?

No tuve este problema en versiones anteriores. Su problema podría ser algo diferente, creo. ¿Estás usando la URL https?

Sí, https.
¿Existe alguna limitación para el objeto formData en RN, por ejemplo, podría ser una longitud de cadena o un tamaño de formData? Parece que el RN intercepta esta solicitud y arroja este error

Tengo react-native v59. Entonces, ¿qué pueden hacer las personas que no usan el Flipper? ¿Hay alguna actualización?

No tuve este problema en versiones anteriores. Su problema podría ser algo diferente, creo. ¿Estás usando la URL https?

Sí, https.
¿Existe alguna limitación para el objeto formData en RN, por ejemplo, podría ser una longitud de cadena o un tamaño de formData? Parece que el RN intercepta esta solicitud y arroja este error

No tengo conocimiento de tales limitaciones. ¿Puedes compartir el código? ¿Y esto funcionó en iOS?

Necesito alcanzar tal estructura de cuerpo de solicitud:

{
    "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":{}}
    ]
}

donde el archivo es un objeto de archivo JS con name , type , uri , size , etc. campos

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' }
});

Tuve el mismo problema en mi proyecto con la versión 0.62 de react-native.
Actualicé flipper a "0.41.0" y funcionó.
En gradle.properities
FLIPPER_VERSION=0.41.0

Tuve el mismo problema en mi proyecto con la versión 0.62 de react-native.
Actualicé flipper a "0.41.0" y funcionó.
En gradle.properities
FLIPPER_VERSION=0.41.0

¿Puede mencionar la ruta de gradle.properties, gradle.properties en Android no contiene la versión flipper? Pero gradle.properties en la carpeta reaccionar de Android tiene una versión flipper.

@ nharis7 está en /android/gradle.properties

Pero, ¿cuál es tu versión de react-native? flipper solo está en la versión nativa de reacción 0.62 y superior. No hay flipper en versiones anteriores.

@ nharis7 está en /android/gradle.properties

Pero, ¿cuál es tu versión de react-native? flipper solo está en la versión nativa de reacción 0.62 y superior. No hay flipper en versiones anteriores.

Actualmente estoy en 0.62.2 y actualicé mi proyecto desde 0.61 en mi /android/gradle.properties. Creé un nuevo proyecto con él, ahora puedo ver la versión de flipper en /android/gradle.properties. Migraré todas mis cosas a un nuevo proyecto y veré si estos problemas se resuelven o no.

ESTA SOLUCIÓN ME FUNCIONÓ
https://github.com/axios/axios/issues/1567#issuecomment-518118223

¡Actualizar flipper lo soluciona! (actualicé a 0.46.0)

¡Intenté todo el camino arriba!
¡Solo actualizar Flipper a 0.46 puede solucionarlo!

"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"
  },

Este problema se resuelve actualizando Flipper en este archivo

/yourproject/android/gradle.properties Línea 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

Ver :
facebook/flipper#993 (comentario)

Funcionó bastante bien, eso resolvió el problema en Android, muchas gracias.

Enfrenté el mismo problema, sucede en Android pero funciona bien en IOS.
Creo que esta pregunta sobre Flipper Network.

Por ahora comento
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

en este archivo
/android/app/src/main/java/com/{your_project}/MainApplication.java

Funcionó para mí :)

Enfrenté el mismo problema, sucede en Android, pero funciona bien en IOS.
Supongo que este tema sobre Flipper Network.

Por un tiempo, comenté
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

en este archivo
/android/app/src/main/java/com/{your_project}/MainApplication.java

probé con esto, entonces pude cargar el archivo

gracias @alfianwahid

¡Actualizar flipper a 0.46.0 lo soluciona!

En
android\gradle.properties

Este problema me tomó más de 5 horas para resolver. Estaba a punto de rendirme cuando finalmente pude resolver el problema.

El problema al que me enfrentaba, que está cerca de lo que mencionas, es que obtenía NetworkError cuando usaba expo-image-picker e intentaba cargar el archivo usando axios . Funcionaba perfectamente en iOS pero no funcionaba en Android.

Así es como resolví el problema.

Hay dos cuestiones independientes en acción aquí. Digamos que obtenemos imageUri del selector de imágenes, luego usaríamos las siguientes líneas de código para cargar desde la interfaz.

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

El primer problema es con el imageUri mismo. Si digamos que la ruta de la foto es /user/.../path/to/file.jpg . Luego, el selector de archivos en Android daría imageUri como file:/user/.../path/to/file.jpg mientras que el selector de archivos en iOS daría imageUri como file:///user/.../path/to/file.jpg .

La solución para el primer problema es usar file:// en lugar de file: en formData en android.

El segundo problema es que no estamos usando el tipo mimo adecuado. Funciona bien en iOS pero no en Android. Lo que empeora esto es que el paquete del selector de archivos proporciona el tipo de archivo como "imagen" y no proporciona el tipo MIME adecuado.

La solución es usar el tipo MIME adecuado en formData en el campo type . Ej: el tipo MIME para el archivo .jpg sería image/jpeg y para el archivo .png sería image/png . No tenemos que hacer esto manualmente. En su lugar, puede usar un paquete npm muy famoso llamado mime .

La solución de trabajo final es:

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()
});

Espero que esto ayude a resolver su problema. :)

Cuando obtiene un error de red con formData, debe verificar la corrección de formData. Es muy importante.

android/gradle.propiedades
actualizar Fliper
FLIPPER_VERSIÓN=0.41.0

Las personas que todavía enfrentan problemas pueden hacer esto

let data = new FormData();

data.append('acción', 'AGREGAR');
data.append('parámetro', 0);
data.append('segundoparámetro', 0);
data.append('archivo', new Blob([carga útil], { tipo: 'texto/csv' }));

// esto funciona
let request = new XMLHttpRequest();
solicitud.open('POST', url);
solicitud.enviar(datos);

funcionará (:+1: (:100:

Parece que muchas personas han podido solucionar esto actualizando su versión de flipper. Lo cual es genial. Pero también mucha gente pasó por el dolor para encontrar este problema y desbloquearse.

Así que pregunta: ¿Qué haría más fácil descubrir esto? ¿Problema anclado? ¿Es un problema cerrado (ya que parece que esto se resolvió) todavía detectable? ¿Enlace de desbordamiento de pila? Parece que esto está resuelto, pero no queremos que la gente siga perdiendo el tiempo tratando de encontrar una solución conocida.

Esto debería cerrarse tan pronto como llegue la actualización: https://github.com/facebook/react-native/pull/29033. Hasta que eso suceda, podemos considerar fijarlo.

Todavía tengo el mismo problema después de actualizar la versión de flipper a 0.46.0

Yo también tengo el mismo problema. Alguien por favor ayúdenos

  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);
        });

No sé lo que hice mal, ¿alguien puede ayudarme a solucionarlo?

Si actualicé FLIPPER_VERSION=0.41.0, la aplicación en sí ni siquiera se abre.

Tal vez esto ayude a alguien que todavía tiene problemas con esto.
¿Utiliza políticas WAF (Web Application Firewall) de Microsoft? En ese caso; tienen un error (o React Native, no estoy seguro de a quién culpar exactamente) que bloquea las solicitudes con un pero solo a veces similar, y solo en iOS. El límite de formulario de varias partes que se genera en el nivel más bajo en RN a veces contiene caracteres (probablemente un . ) que las políticas bloquean.

Esto nos cuesta muchos días averiguarlo. Microsoft lo reconoció. Deshabilitamos la política WAF relacionada para solucionar el problema. Esto no sucede en PostMan, por ejemplo. Eso genera un límite diferente al que genera RN.

Actualizando flipper a 0.44.0 y React-native 0.63.0, sigo teniendo el mismo problema

Lo arreglé comentando una línea en el
/android/app/src/debug/java/com/{nombre-de-tu-aplicación}/ReactNativeFlipper.java
expediente.
¡Esta es la única solución que funcionó para mí!

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

Si probó todo lo anterior y nada lo ayudó, y está usando el selector de imágenes y los datos de formulario, intente agregar esto en las opciones del selector de imágenes:
``` js
dejar opciones = {
título: 'Seleccionar imagen',
sin datos: verdadero,
ancho máximo: 500,
altura máxima: 500,
};
ImagePicker.showImagePicker(opciones, respuesta => {
.
.

Form data should look like this then:

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

Enfrenté el mismo problema, sucede en Android, pero funciona bien en IOS.
Supongo que este tema sobre Flipper Network.

Por un tiempo, comenté
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

en este archivo
/android/app/src/main/java/com/{your_project}/MainApplication.java

Tuve el mismo problema en mi proyecto con la versión 0.62 de react-native.
Actualicé flipper a "0.41.0" y funcionó.
En gradle.properities
FLIPPER_VERSION=0.41.0

Ambos funcionan para mí. Pero solo usa una solución. Gracias a ambos. @alfianwahid @dmobisoft
Piense FLIPPER_VERSION=0.41.0 mejor solución.

¿Alguien de los desarrolladores nativos de React está al tanto de este problema tembloroso, ya que cualquier persona con ESPACIO DE TRABAJO ADMINISTRADO (por ejemplo, Expo) no puede implementar las "soluciones" propuestas con el truco RN Flipper? ¿Alguna solución propuesta de su parte para espacios de trabajo administrados como Expo?

Hola , @Hiti3 , sugeriría crear un problema en el repositorio de Expo aquí: https://github.com/expo/expo , ya que las soluciones aquí no se aplicarían a un espacio de trabajo administrado.

cc @brentvatne

@ Hiti3 : esto no afecta las aplicaciones de exposición administradas porque Flipper no está integrado en ellas. si ve este error, es por otras razones además de las mencionadas en este problema, y ​​su mejor curso de acción si no puede encontrar una solución es crear un mcve y publicarlo en https://github.com/ expo/expo/problemas

Para mí tampoco funciona dando error [TypeError: solicitud de red fallida]

CÓDIGO :

const nombre de usuario = this.state.values.username;
const apellido = este.estado.valores.apellido;
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');
                    }
                };

Para mí tampoco funciona dando error [TypeError: solicitud de red fallida]

CÓDIGO :

const nombre de usuario = this.state.values.username;
const apellido = este.estado.valores.apellido;
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');
                    }
                };

Usted dio la dirección IP como una URL de cadena es una verificación incorrecta una vez más.

cuando publique sin archivo (imagen) funcionará bien, cuando envíe con archivo de imagen esa vez que muestre el error [TypeError: solicitud de red fallida]; no desconfíes de la URL

Lo arreglé comentando una línea en el
/android/app/src/debug/java/com/{nombre-de-tu-aplicación}/ReactNativeFlipper.java
expediente.
¡Esta es la única solución que funcionó para mí!

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

Prueba este que me funcionó

También tengo el mismo problema. Uso hack para esto https://github.com/facebook/react-native/issues/29021#issuecomment -662196480.

Si tiene la versión 0.37.0 de Flipper, pásela a la 0.41.0. Funcionó en la mía.

Enfrenté el mismo problema, sucede en Android, pero funciona bien en IOS.
Supongo que este tema sobre Flipper Network.

Por un tiempo, comenté
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

en este archivo
/android/app/src/main/java/com/{your_project}/MainApplication.java

Muchas gracias funcionó perfectamente en mi proyecto.
Solo quiero saber cómo pudiste descubrir que el inicializador Flipper fue la causa del error.

@alfianwahid

Solo por compartir. Para Android, puede intentar actualizar la versión de flipper a 0.41, luego funcionará bien. Pero para IOS, sigo enfrentándome al mismo problema, incluso la versión de IOS flipper es 0.41.5. Entonces, para IOS, actualizo manualmente node_modules/react-native/Libraries/Network/RCTNetworkTask.mm y ahora funciona en IOS.

por favor, ¿pueden decirme cómo actualizar flipper FLIPPER_VERSION=0.33.1 a 0.41?

@sureshhallyali , puede actualizar FLIPPER_VERSION=0.41.0 en el archivo android/gradle.properties. Después de eso, limpie la compilación de Android y vuelva a ejecutar Android.

Solo para compartir, estoy usando Flipper 0.50 en mi Ubuntu y actualizar android/gradle.properties a FLIPPER_VERSION=0.50.0 también funcionó bien.

Probé todas las soluciones anteriores (desde actualizar flipper hasta comentar y eliminar la carpeta de depuración y todo), y ninguna funcionó para mí, sigo recibiendo network error aunque la imagen se guarda en el servidor. react-native 0.62.2 , lo he estado intentando durante 2 días, esto es realmente frustrante...

este es mi codigo

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);

Enviar (en resumen)

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);
    }

¿Se solucionó este problema en 0.63.1 ?

ACTUALIZAR:
Actualizado a 0.63.2 todavía, el problema persiste

Solo para compartir, estoy usando Flipper 0.50 en mi Ubuntu y actualizar android/gradle.properties a FLIPPER_VERSION=0.50.0 también funcionó bien.

@vinifraga , ¿cómo actualizas la versión de Flipper en IOS? Sé cómo actualizar en Android pero no estoy seguro de cómo actualizar desde ios/podfile allí.

Hola chicos prueben rn-fetch-blob esto funciona para mí
estaba usando Axios para cargar la imagen pero no funcionaba para Android, así que después de tantas búsquedas encontré este paquete y funcionó

Enlace aquí para el paquete

Intenté todo (otros lib también rn-fetch-upload, rn-background-upload, ...), la carga de imágenes no funciona en iOS y está bien en Android. Cargar en S3 usando una URL prefirmada siempre me devuelve esto (funcionaba bien en RN -v 0.59.x, y ya no en RN -v 0.61.x:
````
"
EntityTooLarge
La subida propuesta supera el tamaño máximo permitido
2025220
2023115
{...}
5n+{...}
"

@MayoudP prueba rn-fetch-blob tal vez esto funcione

Gracias @abumostafa

Intenté esta solución pero no funcionó.
1: necesita agregar
uesCleartextTraffic="true" al archivo AndroidManifest.xml que se encuentra dentro del directorio android/app/src/main/AndroidManifest.xml
para manejar http y https

2: necesito comentar
// initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
en este archivo /android/app/src/main/java/com/{your_project}/MainApplication.java
3: necesito comentar
// builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
int su archivo android/app/src/debug/java/com/{your_project}/ReactNativeFlipper.java
4: alguien dijo que la actualización reacciona nativa a 63.2 que también se hizo
5: actualización de la versión FLIPPER a 50.0

necesito probar ahora uno: rn-fetch-blob
https://github.com/facebook/react-native/issues/29493

3: necesito comentar
// builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));

finalmente funcionó en android

Usando rn-fetch-blob para las llamadas a la API donde se necesitan datos de formulario (iOS confirmado, aún no estoy seguro acerca de Android), simplemente reemplacé mis llamadas regulares de búsqueda allí (ver Léame):

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

¿Este problema realmente persiste durante unos 4 meses?

@MayoudP prueba rn-fetch-blob tal vez esto funcione

Nop, no funcionó, no logró que funcionara usando una URL prefirmada y S3...

Solo por compartir. Para Android, puede intentar actualizar la versión de flipper a 0.41, luego funcionará bien. Pero para IOS, sigo enfrentándome al mismo problema, incluso la versión de IOS flipper es 0.41.5. Entonces, para IOS, actualizo manualmente node_modules/react-native/Libraries/Network/RCTNetworkTask.mm y ahora funciona en IOS.

@ anthony1110 ¿Qué actualizas en node_modules/react-native/Libraries/Network/RCTNetworkTask.mm ?

@MayoudP prueba rn-fetch-blob tal vez esto funcione

Nop, no funcionó, no logró que funcionara usando una URL prefirmada y S3...

Solo funciona RNFS rn

@andrekovac , puede seguir este hilo y seguir la solución de IOS y Android. https://github.com/facebook/react-native/issues/29021#issuecomment-664030881

Aplicar el parche @ anthony1110 mencionado no funciona para mí. Sigo recibiendo errores de red.

Pero parece que pronto llegará una solución (para React Native 0.63 ): https://github.com/facebook/react-native/issues/29364#issuecomment -664526253

@andrekovac , no sigas mi parche, ese es un truco. Mala solución. Debe seguir la actualización https://github.com/facebook/react-native/issues/29364#issuecomment -663005914 para el problema de IOS.

Quien todavía está luchando con este problema. está sucediendo debido al complemento de red Flipper.
Lo deshabilité y las cosas funcionan bien.

Mi solución para que esto funcione es comentar la línea número 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);

en este archivo android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

Intento esto y funciona al 100%

Quien todavía está luchando con este problema. está sucediendo debido al complemento de red Flipper.
Lo deshabilité y las cosas funcionan bien.

Mi solución para que esto funcione es comentar la línea número 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);

en este archivo android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

esto funciona (Y)

Este bicho me va a volver loco
Todas las soluciones anteriores no funcionan

Hola @victor012888 he probado el rn-fetch-blob

Utilizo la forma de carga FLIPPER_VERSION=0.50.0 finalmente resuelta
Mi problema es INSTALL_FAILED_INSUFFICIENT_STORAGE porque los nuevos paquetes son demasiado grandes
Después de agregar más RAM para la máquina virtual, todo está funcionando

Lo he intentado todo, todavía tengo un problema.
no solo la versión de depuración sino también la versión de lanzamiento.

¡He resuelto mi problema ahora!
①actualizar FLIPPER_VERSION=0.52.0 más reciente

②código formData como este
let formData = new FormData();
this.state.pics.map((valor,índice) => {
consola.log(valor)
consola.log(índice)
let file = { uri:value.uri , type: 'multipart/form-data', name:value.uri.substr (value.uri.length-10,10)};
formData.append('archivo'+índice,archivo)
})

el tipo debe ser 'multipart/form-data', lo mismo con el encabezado de la publicación.

espero pueda ayudar a alguien

Utilizo la forma de carga FLIPPER_VERSION=0.50.0 finalmente resuelta
Mi problema es INSTALL_FAILED_INSUFFICIENT_STORAGE porque los nuevos paquetes son demasiado grandes
Después de agregar más RAM para la máquina virtual, todo está funcionando

como actualizar FLIPPER

Tengo este problema, comencé en RN63+ y no tengo flipper. Flipper está completamente desinstalado.

También solo sucede para cargas de archivos con multipart/form-data , el tipo está definido. Pero la solicitud se omite cada vez en Android.

Hola estoy usando expo 38 con RN 0.62.2
Estoy usando el flujo de trabajo básico, por lo que puedo editar el código nativo.
Tengo los mismos problemas a pesar de que probé todas las soluciones enumeradas:

• Flipper actualizado en gradle.properties a 0.52.0
• comentó la línea initializeFlipper en MainApplication.java
• Intenté todas las configuraciones posibles para el tipo del parámetro formData del 'archivo'.

Mi código se ve así

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
}

¿Alguna idea de lo que me podría estar perdiendo?

Desafortunadamente, las soluciones mencionadas sobre comentar las líneas de código de Flipper y demás no funcionaron para mí.

Sin embargo, logré que esto funcionara usando rn-fetch-blob .

A continuación se muestra un fragmento de código que muestra cómo he usado esa biblioteca para cargar un archivo 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>),
    },
  ]
)

Enfrenté el mismo problema, sucede en Android, pero funciona bien en IOS.
Supongo que este tema sobre Flipper Network.

Por un tiempo, comenté
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

en este archivo
/android/app/src/main/java/com/{your_project}/MainApplication.java

Bro su trabajo perfectamente, gracias 👍

Hola estoy usando expo 38 con RN 0.62.2
Estoy usando el flujo de trabajo básico, por lo que puedo editar el código nativo.
Tengo los mismos problemas a pesar de que probé todas las soluciones enumeradas:

• Flipper actualizado en gradle.properties a 0.52.0
• comentó la línea initializeFlipper en MainApplication.java
• Intenté todas las configuraciones posibles para el tipo del parámetro formData del 'archivo'.

[...]

¡Ahhhh, descubrí lo que me estaba perdiendo!
En mi caso, estaba ingresando el encabezado incorrecto a mi llamada de búsqueda, debido a una copia y pegado anterior>.<
yo estaba usando

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

cuando en cambio debería haber sido:

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

La parte complicada es que:

1. este error funciona en iOS
2. siempre había sido así en Android durante meses sin problemas para cargar archivos

Parece que desde las últimas actualizaciones de RN, estos errores ya no se toleran con Android.

Enfrenté el mismo problema, sucede en Android, pero funciona bien en IOS.
Supongo que este tema sobre Flipper Network.

Por un tiempo, comenté
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

en este archivo
/android/app/src/main/java/com/{your_project}/MainApplication.java

Recibía stream closed cuando intentaba subir a S3 con XHR y esto resuelve el problema y gracias 👍

Actualicé Flipper a la versión 0.51.2 y me funcionó.

Actualicé Flipper a la versión 0.51.2 y me funcionó.

Hola @omid-ebrahimi, ¿cómo actualizaste la versión de Flipper?

Gracias

mismo problema 0.63.2

Actualicé Flipper a la versión 0.51.2 y me funcionó.

Hola @omid-ebrahimi, ¿cómo actualizaste la versión de Flipper?

Gracias

Vaya a android/gradle.properties y agregue esta línea

FLIPPER_VERSION=0.52.1

Debería tener las siguientes líneas en su 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'
    }

    // ...
}

Actualicé Flipper a la versión 0.51.2 y me funcionó.

Hola @omid-ebrahimi, ¿cómo actualizaste la versión de Flipper?
Gracias

Vaya a android/gradle.properties y agregue esta línea

FLIPPER_VERSION=0.52.1

Debería tener las siguientes líneas en su 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 actualizar flipper también resuelve el problema, gracias, y he abierto un problema sobre esto en StackOverflow con la recompensa, envíe esta respuesta allí y puedo otorgarle la recompensa.

Actualicé flipper a la versión 52.0
y uso fetch y funcionó para mí
Pero cuando uso axios.post no funciona
Y cuando uso axios como
axios({ method:'post , data : file , url:'something ',............. })
funciona bien

Y no establezca el encabezado
'Content-Type': 'multipart/form-data'
también funcionará bien

Quien todavía está luchando con este problema. está sucediendo debido al complemento de red Flipper.
Lo deshabilité y las cosas funcionan bien.

Mi solución para que esto funcione es comentar la línea número 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);

en este archivo android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

@abumostafa La solución que proporcionó es efectiva, pero aún no funciona para los archivos que comienzan con "file:///".
P.ej:

• Esto puede funcionar: formData.append('files', {uri:'https://xxx.jpg', type:'image/jpeg', name:'test.jpeg' })
• Esto no funciona: formData.append('files', {uri:'file:///xxx.jpg', type:'image/jpeg', name:'test.jpeg' })

Mi versión nativa de reacción:

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

el mismo problema intentó actualizar flipper pero no funcionó.

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

¿Qué hay de iOS?

Tener este problema en iOS también. Intenté cambiar la versión de Flipper de 0.33.1 a 0.50.0 y superior en mi Podfile. esto me esta pasando en

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

La sugerencia de @abumostafa hizo que funcionara para Android, pero aún no puedo hacerlo funcionar en iOS.

EDITAR: Actualizado a react-native: 0.63.2 sigue siendo el mismo problema.

Cambiar las versiones de Flipper no me funciona. Intenté comentar la línea que puede ayudar, pero también enfrenté el mismo problema. Mi solución es usar WebView e inyectar Javascript para hacer las cargas. Este truco funciona bien para mí.

Mi solución es usar <WebView> e inyectar javascript. Cuando quiera cargar un nuevo archivo, pasaré los parámetros relevantes a un generador de funciones de cadena generateUploadCodes() y generará una cadena que será inyectado a la vista 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(); 
    `;
  }

Con eso solo puedo llamar

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

Para obtener la respuesta de la carga, podemos usar webview.ReactNativeWebView.postMessage('our response'); . Luego procese la respuesta a través del controlador onMessage de WebView.

Antes de todo eso, debemos crear nuestra referencia y nuestro componente WebView primero así

  const webview = useRef(null);

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

Al reunir todas las correcciones aquí, con suerte podemos obtener una solución para esto fusionado con el núcleo pronto:

iOS: Revertir un PR, requiere modificar node_modules: https://github.com/facebook/react-native/issues/29364#issuecomment -671565181, PR enviado aquí para la corrección: https://github.com/facebook/react -native/pull/29595

Android: actualice la versión de Flipper https://github.com/facebook/react-native/issues/28551#issuecomment -674351386, relaciones públicas planteadas https://github.com/facebook/react-native/pull/29787

Si alguien todavía tiene problemas en la versión 0.62 o superior de RN, la solución es:
Debe tener que dar uri, nombre y tipo de los medios que está cargando.

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

Luego vaya a la línea número 43 y comente esta línea:
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
en android/app/src/debug/java/com/"nombre del proyecto"/ReactNativeFlipper.java

Pasé cerca de 8 horas buscando la solución para el error.

Si alguien todavía tiene problemas en la versión 0.62 o superior de RN, la solución es:
Debe tener que dar uri, nombre y tipo de los medios que está cargando.

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

Luego vaya a la línea número 43 y comente esta línea:
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
en android/app/src/debug/java/com/"nombre del proyecto"/ReactNativeFlipper.java

Pasé cerca de 8 horas buscando la solución para el error.

Sí, ese fue mi caso también, lo confirmé aquí: https://github.com/facebook/react-native/issues/29364#issuecomment -679370449

Actualización de Flipper PR planteada por FB https://github.com/facebook/react-native/pull/29787

Al reunir todas las correcciones aquí, con suerte podemos obtener una solución para esto fusionado con el núcleo pronto:

iOS: Revertir un PR, requiere modificar node_modules: https://github.com/facebook/react-native/issues/29364#issuecomment -671565181, PR enviado aquí para la corrección: https://github.com/facebook/react -native/pull/29595

Android: actualice la versión de Flipper https://github.com/facebook/react-native/issues/28551#issuecomment -674351386, relaciones públicas planteadas https://github.com/facebook/react-native/pull/29787

Estaba teniendo el mismo problema y ninguna de las soluciones aquí funcionó para mí.

Lo que funcionó fue que solo me falta el mime_type de mi carga.

Asegúrate de tener estos datos correctamente:

• uri
• nombre
• escribe

Trabajó con la actualización de flipper a FLIPPER_VERSION=0.52.1 .

Cambie en este archivo - android/gradle.properties y ejecute 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,
});

paquete.json

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

¿Hay alguna solución para esto usando Expo?

alguien soluciono este problema? Ya intente todos los métodos, como comentar algún comando de flipper, actualizar flipper en graddle.properties, incluso si rebajé mi RN de 0.63 a 0.62, todavía tengo este error. Ya atascado en este error durante 2 días. Cuando trato de publicar datos sin archivo en mi API, funciona bien, pero cuando intento cargar un archivo como una imagen en mi API, aparece este error.

@imamseptian https://github.com/facebook/react-native/issues/28551#issuecomment -682276503

@safaiyeh todavía no funcionó para mí, señor, ya lo intenté todo.

Si alguien todavía tiene problemas en la versión 0.62 o superior de RN, la solución es:
Debe tener que dar uri, nombre y tipo de los medios que está cargando.

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

Luego vaya a la línea número 43 y comente esta línea:
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
en android/app/src/debug/java/com/"nombre del proyecto"/ReactNativeFlipper.java

Pasé cerca de 8 horas buscando la solución para el error.

Hice lo mismo, pero sigo enfrentando el mismo problema. estoy usando
"reaccionar": "16.13.1",
"reaccionar nativo": "0.63.1",

@sadhruva Tengo el mismo entorno que tú y esto me resolvió el problema.

Estoy experimentando el mismo problema. Este tipo de errores son frustrantes, ya que prácticamente no podemos hacer nada más que esperar una versión fija.

He intentado:

• Comentando la línea en el archivo java

• Cambiando mi versión de flipper

• Escribiendo el código de 2 maneras diferentes

Y todavía no funciona. Lo extraño es que el formulario SÍ funciona en otras partes de mi aplicación, pero en esa pantalla en particular no funciona (solo en Android, porque en iPhone funciona como se esperaba).

Entonces, parece que lo único que puedo hacer ahora es continuar con el desarrollo solo para iOS y retrasar el lanzamiento de Android.

La vida es vida... supongo.

Estoy experimentando el mismo problema. Este tipo de errores son frustrantes, ya que prácticamente no podemos hacer nada más que esperar una versión fija.

He intentado:

• Comentando la línea en el archivo java
• Cambiando mi versión de flipper
• Escribiendo el código de 2 maneras diferentes

Y todavía no funciona. Lo extraño es que el formulario SÍ funciona en otras partes de mi aplicación, pero en esa pantalla en particular no funciona (solo en Android, porque en iPhone funciona como se esperaba).

Entonces, parece que lo único que puedo hacer ahora es continuar con el desarrollo solo para iOS y retrasar el lanzamiento de Android.

La vida es vida... supongo.

Experimentando el mismo problema. Sin embargo, es extraño que la misma función funcione bien con reaccionar, así que fui a verificar los paquetes de red y descubrí que mi paquete de solicitud de red webAPP de reacción va con un encabezado de tipo de contenido: multipart/form-data , mientras que RN va con content -type:application/form-data .
Así que edité mi función de solicitud de esta manera:
await fetch(url, { method: 'POST', headers: { 'Content-Type': 'multipart/form-data', }, body: formData, })
Luego incluya tipo y nombre en formData
let formData = new FormData(); formData.append('file', {uri: fileUri,type:fileType,name:fileName});
No sé por qué, pero funciona milagrosamente.

estoy usando reaccionar versión nativa 0.63.2 y seguí estos pasos para solucionar el problema
usando react-native-cli

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

2 - en android/app/src/debug/java/com/{yourProject}/ReactNativeFlipper.java
comentario en la línea 43 -> builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));

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

4 - en android/app/build.gradle
sobrescribir las dependencias actuales de Flipper para

  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'
    }

    // ...
  }

y después de todos estos pasos -> npx react-native run-android o yarn android

5 - en mi solicitud de carga de publicaciones

  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}`,
            },
          },
        );

Espero que esto ayude

@mathrocha12100 ¿puede dar el formato adecuado a su comentario? Algún código parece estar fuera de lugar, podría intentar hacerlo paso a paso.

El problema es que realmente no quiero estropear la configuración de Android. Pero de todos modos, formatee su respuesta correctamente para ayudar a todos los que se encuentren con este problema (incluyéndome a mí).

Salud.

Todavía no funciona.

@dlogvin
Enfrenté este problema ayer y lo solucioné como dijo @omid-ebrahimi [actualizar Flipper], además de comentar esta línea
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); a ReactNativeFlipper.java

Limpiar carpetas de compilación [ios, android]
luego construye de nuevo, funciona bien para mí :)

@dlogvin
Enfrenté este problema ayer y lo solucioné como dijo @omid-ebrahimi [actualizar Flipper], además de comentar esta línea
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); a ReactNativeFlipper.java

Limpiar carpetas de compilación [ios, android]
luego construye de nuevo, funciona bien para mí :)

¿Cómo actualizas exactamente Flipper?

editar: ya intenté reemplazar la versión FLIPPER y comentar las líneas, pero aún nada. De hecho, en la versión de depuración de la aplicación, las imágenes no se cargan después de comentar las líneas. Esto es un completo desastre...

@dlogvin en android/gradle.properties
cambiar FLIPPER_VERSION=0.37.0 a FLIPPER_VERSION=0.52.1

aquí está la versión reaccionar y reaccionar nativa si te preguntas

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

@anastely lo hice... todavía nada :(

Tiro la toalla...

@dlogvin Traté de cargar imágenes desde el servidor y está cargado, así que lo siento :(

si su proyecto es de código abierto, puedo comprobarlo

Me disculpo, pero el proyecto no es de código abierto. He probado a subir archivos, el formulario funciona en otras pantallas, pero en esta en concreto no. Tendré que esperar la actualización de RN, mientras tanto solo trabajaré en la versión de iPhone y mantendré la versión de Android en BETA.

trabajo para mí. Cambio la versión de flipper en gradle. Configurando el archivo FLIPPER_VERSION = 0.30.2 a FLIPPER_VERSION = 0.52.1, luego limpio gradlew y ejecuto el proyecto.
en el método XMLHttpRequest de uso nativo de reacción.
export let dataWithImage = async (endPoint, params) => {
let token = esperar AsyncStorage.getItem('token');
let xhr = new XMLHttpRequest();
let formData = new FormData();
para (dejar ingresar parámetros) {
formData.append(clave, params[clave]);
}
xhr.withCredentials = verdadero;
xhr.addEventListener('readystatechange', función () {
if (this.readyState === 4) {
console.log(this.responseText, '===> esta es la respuesta');
}
});
xhr.open('POST', url + punto final);
xhr.setRequestHeader('Autorización', 'Portador' + token);
xhr.send(formData);
};

Estoy enfrentando un problema similar con una solicitud POST en mi servidor (HTTPS), funciona bien para iOS pero no en Android. Intenté deshabilitar Flipper y actualizarlo y aún tengo el mismo problema. Probé con otro servidor, como (https://jsonplaceholder.typicode.com/) y parece funcionar como se esperaba.

La descripción del error no me dice demasiado "Error de red", ya verifiqué los permisos de Internet y configuré android:usesCleartextTraffic= "true" en el manifiesto de Android.

Mismo problema con fetch o axios.

Para IOS en
archivo node_modules/react-native/Libraries/Image/RCTLocalAssetImageLoader.mm

Reemplazar a continuación

• -(RCTImageLoaderCancellationBlock)loadImageForURL:(NSURL *)imageURL
  tamaño:(CGSamaño)tamaño
  escala:(CGFloat)escala
  resizeMode:(RCTRResizeMode)resizeMode
  controlador de progreso: (RCTImageLoaderProgressBlock) controlador de progreso
  manejador de carga parcial: (RCTImageLoaderBloque de carga parcial) manejador de carga parcial
  controlador de finalización:(RCTImageLoaderBloque de finalización) controlador de finalización
  {
  UIImage *imagen = RCTImageFromLocalAssetURL(imagenURL);
  si (imagen) {
  if (manejador de progreso) {
  manejadordeprogreso(1, 1);
  }
  controlador de finalización (nil, imagen);
  } demás {
  NSString *mensaje = [NSString stringWithFormat:@"No se pudo encontrar la imagen %@", imageURL];
  RCTLogWarn(@"%@", mensaje);
  controlador de finalización (RCTErrorWithMessage (mensaje), nil);
  }

  devolver cero;
  }

Con

• -(RCTImageLoaderCancellationBlock)loadImageForURL:(NSURL *)imageURL
  tamaño:(CGSamaño)tamaño
  escala:(CGFloat)escala
  resizeMode:(RCTRResizeMode)resizeMode
  controlador de progreso: (RCTImageLoaderProgressBlock) controlador de progreso
  manejador de carga parcial: (RCTImageLoaderBloque de carga parcial) manejador de carga parcial
  controlador de finalización:(RCTImageLoaderBloque de finalización) controlador de finalización
  {
  __block auto cancelado = std::make_shared<:atomic i="44">>(false);
  RCTExecuteOnMainQueue(^{
  if (cancelado->cargar()) {
  regreso;
  }

  UIImage *imagen = RCTImageFromLocalAssetURL(imagenURL);
  si (imagen) {
  if (manejador de progreso) {
  manejadordeprogreso(1, 1);
  }
  controlador de finalización (nil, imagen);
  } demás {
  NSString *mensaje = [NSString stringWithFormat:@"No se pudo encontrar la imagen %@", imageURL];
  RCTLogWarn(@"%@", mensaje);
  controlador de finalización (RCTErrorWithMessage (mensaje), nil);
  }
  });

  volver ^{
  cancelado->almacenar(verdadero);
  };
  }

Esta..

Me gusta y me encanta, si funciona 👍

Hola a todos, se acaba de fusionar una solución para dominar: https://github.com/facebook/react-native/commit/d8b70b19b39ead4dd41895d666d116a43c56474e

También había una corrección de iOS ya comprometida en el maestro.

Ingresé una solicitud de puerto posterior aquí: https://github.com/react-native-community/releases/issues/203#issuecomment -695052285, espere esto en 0.63.3 o 0.64

@safaiyeh Estoy extasiado ahora mismo con este comentario que agregaste. Espero volver a poner mis manos en el desarrollo para Android lo antes posible.

Salud.

Muchas gracias.

Sí, me alegro de que todos obtengan la solución pronto 🙇‍♂️ también ha sido un poco agitado para mí perseguir a las personas adecuadas y demás. ¡Acercarse!

Gracias, lo estoy esperando.
Por ahora estoy usando la misma solución hecha por @mathrocha12100.

Estoy enfrentando un problema similar en iOS. No es particular de los archivos, pero en iOS mis llamadas a la API fallan aleatoriamente, la misma solicitud de la API funcionará una vez, la otra vez falla con una respuesta indefinida.
en android funciona bien todo el tiempo
Estoy usando axios 0.19.2, intenté buscar pero el mismo resultado
Reaccionar nativo 0.62.2

@ vajid-khan, ¿ha confirmado que el problema está en su lado frontal? Intente usar cartero o Insomnia para verificar si es su backend, su código nativo de reacción o si es el marco en sí. No he experimentado ningún problema con las solicitudes de otras API.

@dlogvin sí, lo he confirmado con el cartero. Con el cartero recibo una respuesta cada vez, incluso Android funciona todo el tiempo. Me enfrento a esto solo en iOS

@dlogvin sí, lo he confirmado con el cartero. Con el cartero recibo una respuesta cada vez, incluso Android funciona todo el tiempo. Me enfrento a esto solo en iOS

@ vajid-khan eso es un poco raro. Este problema específico se basa en solicitudes de métodos POST con archivos. También podría resolver algunas depuraciones, probablemente encabezados o algo así.

@dlogvin sí, lo he confirmado con el cartero. Con el cartero recibo una respuesta cada vez, incluso Android funciona todo el tiempo. Me enfrento a esto solo en iOS

@ vajid-khan eso es un poco raro. Este problema específico se basa en solicitudes de métodos POST con archivos. También podría resolver algunas depuraciones, probablemente encabezados o algo así.

Confirmo su problema, también lo he enfrentado en "ios" después de actualizar Flipper a 0.54.0 como mencionó @safaiyeh en PR.

Editar:
Cuando abro xCode y envío la solicitud, puedo ver esto en los registros

[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 }

Así que obtuve esto después de buscar # https://github.com/facebook/react-native/commit/31980094107ed37f8de70972dbcc319cc9a26339
Y reemplazándolo como dijeron,
¡La solicitud posterior funciona en algunos casos!
En mi aplicación, envío una imagen en la solicitud posterior, si elijo una imagen de la _predeterminada en el simulador_, la solicitud no obtuvo ninguna respuesta _'no funciona como antes'_ pero el problema anterior desapareció,
¡Así que no sé qué está pasando!
¡Si alguien puede probar este caso en su dispositivo físico y háganoslo saber!

@mathrocha12100 muchas gracias, tu respuesta resuelve mi problema

Mismo problema, probé todo lo dicho aquí! ¡Sigue sin funcionar!

Prueba esto

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'}})

Prueba esto

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'}})

Este no es el problema. Otras formas en mi aplicación funcionan excepto una específica. Esto no es un problema de ruta.

Prueba esto

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'}})

Este no es el problema. Otras formas en mi aplicación funcionan excepto una específica. Esto no es un problema de ruta.

Sí, funcionará otro método de publicación, excepto la carga de archivos, ya que está relacionado con Flipper. Cambie la versión de Flipper a 0.58 y ejecute gradlew clean en la carpeta de Android. Para mí, después de esto, solo cambiar a content:// funciona para mí; de lo contrario, da Network err.

@safaiyeh ¿ Alguna actualización sobre esto?
Quiero liberar mi aplicación :(

Quien todavía está luchando con este problema. está sucediendo debido al complemento de red Flipper.
Lo deshabilité y las cosas funcionan bien.

Mi solución para que esto funcione es comentar la línea número 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);

en este archivo android/app/src/debug/java/com/**/ReactNativeFlipper.java

Sigue siendo un problema en reaccionar nativo 0.63. Esta solución funcionó para mí.

Mismo problema, probé todo lo dicho aquí! ¡Sigue sin funcionar!
¡El primer paso de @mathrocha12100 solucionó mi problema!
android/app/src/main/java/com/{yourProject}/MainApplication.java comment -> initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

¡El mismo problema aqui!

Primer intento de corregir el problema:

actualizar Flipper a 0.46.0 (no funcionó)
actualizar Flipper a 0.52.0 (no funcionó)
comentario en la línea 43 de ReactNativeFlipper.java (no funcionó)
elimine la carpeta de depuración en android / app / src / debug (no funcionó)

Versiones instaladas en mi proyecto:

"reaccionar": "16.13.1",
"reaccionar nativo": "0.63.2",
"axios": "^ 0.20.0",

Necesitamos una solución urgente

¡El mismo problema aqui!

Primer intento de corregir el problema:

actualizar Flipper a 0.46.0 (no funcionó)
actualizar Flipper a 0.52.0 (no funcionó)
comentario en la línea 43 de ReactNativeFlipper.java (no funcionó)
elimine la carpeta de depuración en android / app / src / debug (no funcionó)

Versiones instaladas en mi proyecto:

"reaccionar": "16.13.1",
"reaccionar nativo": "0.63.2",
"axios": "^ 0.20.0",

Necesitamos una solución urgente

Estoy absolutamente de acuerdo con esto... necesitamos una solución PERMANENTE urgente. Esto está retrasando mi proyecto, es decir, me está afectando mucho. Se está volviendo realmente molesto, la espera se hace cada vez más larga. ¿Cuándo sale la actualización?

¡Gracias a todos por su paciencia! La solución se lanzó con 0.63.3, ¡asegúrese de revertir cualquier trabajo que haya realizado y actualice correctamente!

Asegúrate de limpiar tu compilación gradle también.

Si ocurrieron nuevos problemas, cree un nuevo problema 🎉🤟😁

¡Gracias a todos por su paciencia! La solución se lanzó con 0.63.3, ¡asegúrese de revertir cualquier trabajo que haya realizado y actualice correctamente!

Asegúrate de limpiar tu compilación gradle también.

Si ocurrieron nuevos problemas, cree un nuevo problema 🎉🤟😁

Actualizado, todavía tengo el mismo problema. ¿Deberíamos cambiar gradle.properties? el mio indica FLIPPER_VERSION=0.33.1

Actualización: cambió la versión de Flipper a: 0.54.0 , todavía no funciona.

las personas que no siguieron ningún tipo de solución proporcionada anteriormente y que actualizaron, confirmen si este no es un problema que esté experimentando yo mismo. Esto no solucionó el problema. @murilokrugner ??

@dlogvin Revertí las modificaciones y actualicé a la versión 63.3 pero aún así no funcionó, ¿tenemos que actualizar Flipper a alguna versión?

En mi proyecto Flipper está en la versión: 0.37.0

Entonces la actualización no funcionó.

@safaiyeh

La actualización no funcionó.

Es un asunto simple, solo una carga y no funciona. Abramos un nuevo tema

Es un asunto simple, solo una carga y no funciona. Abramos un nuevo tema

Es un asunto sencillo que es URGENTE arreglar. Muchas aplicaciones se ven afectadas por esto, cargar archivos es imprescindible para muchos servicios.

Definitivamente deberíamos abrir un nuevo número.

Puede usar esto para la diferencia completa https://react-native-community.github.io/upgrade-helper/

Puede usar esto para la diferencia completa https://react-native-community.github.io/upgrade-helper/

Ya hice uso de eso, nada ayudó.

Tal vez sea una pregunta tonta :"D
Pero, ¿cómo se actualiza a la última versión 0.63.3?
usando ayudante y copiar y pegar dif?

Tal vez sea una pregunta tonta :"D
Pero, ¿cómo se actualiza a la última versión 0.63.3?
usando ayudante y copiar y pegar dif?

npx react-native upgrade intente, pero estoy 99.99% seguro de que la "solución" no funcionará.

Actualicé mi proyecto de 63.2 a 63.3 y Flipper de 0.37.0 a 0.54.0

Pero sigue sin funcionar

¿Estoy haciendo algo mal?

Después de actualizar a 0.63.3

¡Tengo algunos problemas extraños en iOS cuando elijo una imagen de la imagen del sistema de archivos y envío la solicitud que no funciona! pero cuando descargo una imagen aleatoria, intente nuevamente, ¡funciona muy bien! "Simulador 13.3"

Android funciona muy bien ;)

Entonces, el problema aún no se ha resuelto.

La carga de archivos no es una cosa en esta nueva versión.

Vuelva a abrir el problema @safaiyeh

Abramos un nuevo número. Con una mínima repro con lo último en react native.

Uno para el problema de @anastely ios y

@dlogvin Problema de Android.

Por favor, etiquétame en el problema.

Todas las soluciones que encontré en internet, hasta ahora ninguna ha funcionado.

Me he enfrentado a este problema desde la versión 0.62 de React Native.

Tenía un proyecto en el que necesitaba cargar archivos pero la fecha límite era corta, por lo que la alternativa era convertir el archivo a una cadena Base64 y enviarlo al backend.

Sin embargo, solucionar este problema es extremadamente urgente.

Todas las soluciones que encontré en internet, hasta ahora ninguna ha funcionado.

Me he enfrentado a este problema desde la versión 0.62 de React Native.

Tenía un proyecto en el que necesitaba cargar archivos pero la fecha límite era corta, por lo que la alternativa era convertir el archivo a una cadena Base64 y enviarlo al backend.

Sin embargo, solucionar este problema es extremadamente urgente.

Estoy de acuerdo, este es un problema crítico y afecta a TODAS las aplicaciones que utilizan la carga de archivos.

@safaiyeh sí, abriré un problema. Lo haré cuando llegue a casa.

Chicos, no lo estoy comprando. ¡Funcionó!

Solución que funcionó para mí: actualicé React Native a 0.63.3 y Flipper a 0.54.0 pero aún no funcionaba.

Reinicié el emulador de Android y lo abrí de nuevo. Y funcionó !!

¡Gracias a todos!

Chicos, no lo estoy comprando. ¡Funcionó!

Solución que funcionó para mí: actualicé React Native a 0.63.3 y Flipper a 0.54.0 pero aún no funcionaba.

Reinicié el emulador de Android y lo abrí de nuevo. Y funcionó !!

¡Gracias a todos!

Interesante, la cosa es... Creé la aplicación para su lanzamiento... Probé en un dispositivo físico, lo mismo. Intenté usar el apk de depuración, el mismo error "error de red".

Aún no resuelto. Próximamente se abrirá el tema.

Chicos, no lo estoy comprando. ¡Funcionó!

Solución que funcionó para mí: actualicé React Native a 0.63.3 y Flipper a 0.54.0 pero aún no funcionaba.

Reinicié el emulador de Android y lo abrí de nuevo. Y funcionó !!

¡Gracias a todos!

Intente ejecutar en un dispositivo físico en la versión de depuración y lanzamiento, por favor

Chicos, no lo estoy comprando. ¡Funcionó!
Solución que funcionó para mí: actualicé React Native a 0.63.3 y Flipper a 0.54.0 pero aún no funcionaba.
Reinicié el emulador de Android y lo abrí de nuevo. Y funcionó !!
¡Gracias a todos!

Intente ejecutar en un dispositivo físico en la versión de depuración y lanzamiento, por favor

@dlogvin También funciona en un dispositivo físico, creo que es algo en caché

Chicos, no lo estoy comprando. ¡Funcionó!
Solución que funcionó para mí: actualicé React Native a 0.63.3 y Flipper a 0.54.0 pero aún no funcionaba.
Reinicié el emulador de Android y lo abrí de nuevo. Y funcionó !!
¡Gracias a todos!

Intente ejecutar en un dispositivo físico en la versión de depuración y lanzamiento, por favor

@dlogvin También funciona en un dispositivo físico, creo que es algo en caché

Me alegro de que se haya resuelto para ti, pero por mi parte... Incluso probé una compilación limpia, todavía no tuve suerte...

Si alguien todavía tiene problemas en la versión 0.62 o superior de RN, la solución es:
Debe tener que dar uri, nombre y tipo de los medios que está cargando.

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

Luego vaya a la línea número 43 y comente esta línea:
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
en android/app/src/debug/java/com/"nombre del proyecto"/ReactNativeFlipper.java

Pasé cerca de 8 horas buscando la solución para el error.

Después de probar todos los trucos discutidos anteriormente, este fue el que me salvó el día. ¡Muchas gracias!

la actualización a 0.63.3 funcionó para mí finalmente

en mi caso, anteriormente este código de formulario de carga funcionaba bien:

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

luego instalé algunas otras dependencias y luego devuelve el error de red.
así que tuve que cambiar el tipo con un prefijo explícito:

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

RN 63.3 solucionó este problema. ¡Funciona!

la actualización a 63.3 también me resolvió

No..

RN 63.3 funciona básicamente porque su versión flipper usa 0.54.0.
Si RN 63.3 aún no funciona, debemos verificar
androide:
FLIPPER_VERSION en el archivo android/gradle.properties
iOS:
instalación de pod --repo-actualización

Estoy usando RN 0.63.3 y actualicé FLIPPER_VERSION a 0.54.0 pero aún no funciona. ¿Alguna otra solución disponible?

lo hice, no es por la versión flipper, estoy usando react -native 0.62.2 y la versión flipper: 0.33.1, comentó la línea 43 en android/app/src/debug/java/com/maxyride/app/ drivers/ReactNativeFlipper.java y se aseguró de que el tipo de carga esté especificado correctamente,

Deberíamos usar estas herramientas para actualizar a RN 63.3. Asegúrese de que cada combinación sea correcta.
https://react-native-community.github.io/upgrade-helper/

¡RESUELTO!
Cambie la versión de react navite en package.json:
"reaccionar-nativo": "0.63.3"
En ANDROID:
android/gradle.propiedades
Cambiar la versión de Flipper:
FLIPPER_VERSIÓN=0.54.0
Después de eso, desinstale la aplicación en el dispositivo y ejecute el proyecto nuevamente. :)
Pasos del IOS:
https://react-native-community.github.io/upgrade-helper/ (simplemente seleccione la última versión de RN o use 0.63.3)

Tal vez esto salvará a alguien. Ocurrió un error similar (¡no cargue archivos!) con cualquier solicitud de red. En mi caso el problema estaba en el certificado ssl de mi servidor https. El plazo del certificado vencido, y esa fue la causa del error.

RN: 0.61.5

Intenté todo lo sugerido en este hilo y busqué sugerencias en todas partes y nada. Finalmente, me di cuenta del problema. Tal vez ayude a alguien más.

En realidad, fue mi culpa... Estaba llamando al selector de imágenes en un componente secundario. El usuario eligió sus imágenes. Hizo clic en guardar, lo que los devolvió al componente anterior. Completarían un formulario y las imágenes se cargarían después de completar el formulario.

El problema fue que, en el componente secundario, llamé a ImagePicker.clear() . Estaba un poco baya, así que no lo vi de inmediato. Obtuve el mismo "error de red no se pudo leer el archivo para uri" que todos los demás obtuvieron, así que creo que para mi caso específico, estaba muy equivocado al pensar que estaba ocurriendo otro problema.

Supongo que lo bueno es que terminé actualizando mi versión nativa de reacción, flipper y Gradle a la última. Así que hay eso. Por otro lado perdí 3 días con esto. La programación es rara.

Si alguien todavía tiene problemas en la versión 0.62 o superior de RN, la solución es:
Debe tener que dar uri, nombre y tipo de los medios que está cargando.

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

Luego vaya a la línea número 43 y comente esta línea:
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
en android/app/src/debug/java/com/"nombre del proyecto"/ReactNativeFlipper.java
Pasé cerca de 8 horas buscando la solución para el error.

Después de probar todos los trucos discutidos anteriormente, este fue el que me salvó el día. ¡Muchas gracias!

no trabajes

Fue mal guiado por una publicación en Internet que decía que la parte file:// en la ruta para Android debería eliminarse antes de configurarla en el URI para los datos del formulario. Usando la ruta tal como está y eliminando el builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); como se mencionó anteriormente, me funcionó para la versión de reacción 0.62.2 tanto para Android como para iOS.

Todavía tengo el problema, uso RN 0.63.3 flipper 0.54.0, subo fotos bien pero cuando subo un video tengo un error de red, estoy usando otro método como dijo @murilokrugner , ya que mi fecha límite también es corta

Todavía tengo el problema, uso RN 0.63.3 flipper 0.54.0, subo fotos bien pero cuando subo un video tengo un error de red, estoy usando otro método como dijo @murilokrugner , ya que mi fecha límite también es corta

para ustedes, si todavía tienen este problema, tengo soluciones simples:

1. instale rn-fetch-blob siga sus instrucciones https://github.com/joltup/rn-fetch-blob
2. luego siga estas instrucciones https://github.com/joltup/rn-fetch-blob#multipartform -data-example-post-form-data-with-file-and-data

el mio esta funcionando bien

@abumostafa eres una leyenda. Muchas gracias.

Cualquiera que todavía enfrente este problema con 0.63.3 y el flipper más nuevo: cambie fetch a XMLHttpRequest. Funciona perfectamente bien.

Todavía enfrenta el mismo problema usando :
RN 0.63.3
aleta 0.54.0

Comenté la línea 43 en android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

Todavía el mismo problema, probé casi todo lo que no funcionaba.

Para compartir mi solución es decodificar con cámara en base64 y luego enviarlo al servidor en ese formato. Estoy completamente decepcionado de cómo en 2020, algunas características minúsculas y simples que los desarrolladores promocionan, simplemente no funcionan durante ... años.

TLDR: cualquiera que tenga problemas para enviar un archivo, intente convertirlo a base64 y enviarlo.