React-native: React Native 0.62.* [TypeError: Network request failed] no upload do arquivo

Criado em 6 abr. 2020  ·  263Comentários  ·  Fonte: facebook/react-native

Por favor, forneça todas as informações solicitadas. Os problemas que não seguem esse formato provavelmente serão interrompidos.

Descrição

Após a atualização de 0.61.4 para 0.62.0, o aplicativo não fará mais upload de arquivos do Android (todas as outras solicitações estão funcionando bem)

Versão nativa do React:

0,62,0

Passos para reproduzir

  1. Instale um novo aplicativo ReactNative via CLI
  2. Carregar um arquivo para o emulador
  3. Tente fazer upload de um arquivo usando fetch
import Picker from "react-native-image-picker"
import {request, PERMISSIONS, RESULTS} from 'react-native-permissions';

class App extends React.Component {

  async componentDidMount() {

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

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

  render(){
    return <View/>
  }
}

resultados esperados

A solicitação deve chegar ao servidor para fazer upload do arquivo

Lanche, exemplo de código, captura de tela ou link para um repositório:

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

Flipper React Native Team Attention Android

Comentários muito úteis

Quem ainda está lutando com este problema. está acontecendo por causa do plugin de rede Flipper.
Eu desabilitei e as coisas funcionam muito bem.

Minha solução para fazer isso funcionar é comentar a linha 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);

neste arquivo android/app/src/debug/java/com/**/ReactNativeFlipper.java

Todos 263 comentários

Mesmo problema aqui!

Mesmo problema !! Estou preso nesta questão dos últimos 2 dias! Pesquisei quase tudo..

Você precisa adicionar este uesCleartextTraffic="true" ao arquivo AndroidManifest.xml encontrado dentro do diretório _android/app/src/main/AndroidManifest.xml_

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

De acordo com documentos

Quando o atributo é definido como "falso", os componentes da plataforma (por exemplo, pilhas HTTP e FTP, DownloadManager e MediaPlayer) recusarão as solicitações do aplicativo para usar o tráfego de texto simples. Bibliotecas de terceiros são fortemente encorajadas a respeitar essa configuração também. A principal razão para evitar o tráfego de texto simples é a falta de confidencialidade, autenticidade e proteção contra adulteração; um invasor de rede pode espionar os dados transmitidos e também modificá-los sem ser detectado.

Você precisa adicionar este uesCleartextTraffic ="true" ao arquivo AndroidManifest,xml encontrado dentro do diretório android/app/src/main

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

De acordo com documentos

Quando o atributo é definido como "falso", os componentes da plataforma (por exemplo, pilhas HTTP e FTP, DownloadManager e MediaPlayer) recusarão as solicitações do aplicativo para usar o tráfego de texto simples. Bibliotecas de terceiros são fortemente encorajadas a respeitar essa configuração também. A principal razão para evitar o tráfego de texto simples é a falta de confidencialidade, autenticidade e proteção contra adulteração; um invasor de rede pode espionar os dados transmitidos e também modificá-los sem ser detectado.

Eu já tentei. Isso é usado quando você está fazendo uma solicitação para um servidor http, mas meu servidor está sendo executado em https. Ele estava funcionando perfeitamente antes de atualizar para 0.62.
Algo está errado.

Todos os outros pedidos estão funcionando perfeitamente. Apenas uploads de arquivos não estão mais funcionando.

Todos os outros pedidos estão funcionando perfeitamente. Apenas uploads de arquivos não estão mais funcionando.

Enfrentei muitos problemas quando tentei atualizar para 0,62, mesmo tendo criado um novo aplicativo e movido meu código para ele. Voltei para 0.61.5 até ficar estável :/

Estou enfrentando o mesmo problema, para RN 0.62.0 e 0.62.1 lança este erro: Network request filed .
Todas as solicitações funcionam, exceto a postagem da imagem

Voltei para 0.61.5 :( Não resta outra escolha por enquanto. Se alguém precisar de ajuda para fazer o downgrade para 0.61.5, consulte react-native-upgrade-helper.

O mesmo acontece aqui!

Eu enfrentei o mesmo problema, acontece no Android, mas funciona bem no IOS.
Eu acho que esta questão sobre Flipper Network.

Por um tempo, comentei
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

neste arquivo
/android/app/src/main/java/com/{your_project}/MainApplication.java

Esse problema ocorre também do meu lado, e adivinhe o que está ocorrendo apenas no modo de depuração. Tentei construir em internalRelease e funciona bem. Eu acho que é por causa do recarregamento automático/rápido no modo de depuração que aplica alguma comunicação de flipper que parece estar relacionada a este problema.

Outro problema aqui é que não há erro no logcat android .. Também passei alguns dias pesquisando como corrigir esse problema ainda sem sorte.

Quem ainda está lutando com este problema. está acontecendo por causa do plugin de rede Flipper.
Eu desabilitei e as coisas funcionam muito bem.

Minha solução para fazer isso funcionar é comentar a linha 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);

neste arquivo android/app/src/debug/java/com/**/ReactNativeFlipper.java

Obrigado pelo problema @abumostafa. Isso ocorre em um novo modelo React Native pronto para uso? Se assim for, isso deve ser analisado, caso contrário, sinta-se à vontade para fechá-lo.

:aviso:Exemplo Reprodutível Ausente
:fonte de informação:Parece que seu problema não tem um exemplo reproduzível. Forneça um lanche ou um repositório que demonstre o problema que você está relatando de maneira mínima, completa e reproduzível .
:aviso:Usando a versão antiga
:fonte de informação:Parece que você está usando uma versão mais antiga do React Native. Atualize para a versão mais recente e verifique se o problema persiste. Se isso não acontecer, por favor nos avise para que possamos encerrar este problema. Isso nos ajuda a garantir que estamos analisando os problemas que ainda existem na versão atual.

Obrigado pelo problema @abumostafa. Isso ocorre em um novo modelo React Native pronto para uso? Se assim for, isso deve ser analisado, caso contrário, sinta-se à vontade para fechá-lo.

Isso ainda ocorre no último modelo React Native 0.62.1

Obrigado pelo problema @abumostafa. Isso ocorre em um novo modelo React Native pronto para uso? Se assim for, isso deve ser analisado, caso contrário, sinta-se à vontade para fechá-lo.

Isso ainda ocorre no último modelo React Native 0.62.1

@safaiyeh
Eu posso confirmar. Ainda está acontecendo no mais recente modelo nativo de reação 0.62.1

Quem ainda está lutando com este problema. está acontecendo por causa do plugin de rede Flipper.
Eu desabilitei e as coisas funcionam muito bem.

Minha solução para fazer isso funcionar é comentar a linha 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);

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

Ainda acontecendo em 0.62.2, e isso corrige temporariamente o problema no Android

@abumostafa

*Tente isso*

tente implementar "rn-fetch-blob"

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

RNFetchBlob.fetch('POST',, {
Aceitar: 'aplicativo/json',
'Content-Type': 'multipart/form-data',}, [
{ nome: 'profileimage', nome do arquivo: this.state.filePath.fileName, data: RNFetchBlob.wrap(this.state.filePath.uri) },
{ nome: 'uid', dados: uidy },
{ nome: 'dob', data:this.state.fDOB},
{ name: 'phonenumber', data:this.state.pnumber},
{ nome: 'endereço', dados:este.estado.endereço},
{ name: 'gender', data: this.state.isgender},
{ name: 'username', data: this.state.fulname}
// tipo de conteúdo personalizado
]).then((res) => {
console.log(res)
ResponseHelper.success('Atualizado');
this.setState({isstarting:false})
})
.catch((erro) => {
this.setState({isstarting:false})
ResponseHelper.success('Problema no servidor, tente novamente');
console.log('err', erro);
})
````

isso vai resolver seu problema

RNFetchBlob.wrap

Obrigado. Eu tenho uma pergunta. Esta função RNFetchBlob.wrap está convertendo o arquivo para base64 ?

Quem ainda está lutando com este problema. está acontecendo por causa do plugin de rede Flipper.
Eu desabilitei e as coisas funcionam muito bem.

Minha solução para fazer isso funcionar é comentar a linha 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);

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

Obrigado @abumostafa Esta solução alternativa economizou muito tempo. Já passei muito tempo no erro de upload de arquivos, então recebi o seu problema. A propósito, você sabia que o problema foi corrigido ou não?

Fiz um ping na equipe do Flipper, o trabalho para isso será rastreado aqui: https://github.com/facebook/flipper/issues/993

Tentei as duas soluções propostas por @abumostafa e @alfianwahid; Tentei fazer o downgrade para 0,61,5; Tentei implementar com fetch (estou usando axios); nenhum funcionou. Estou usando a versão 0.62.1

Tentei as duas soluções propostas por @abumostafa e @alfianwahid; Tentei fazer o downgrade para 0,61,5; Tentei implementar com fetch (estou usando axios); nenhum funcionou. Estou usando a versão 0.62.1

você tentou reconstruir o aplicativo após as alterações??

@abumostafa Não sei se fiz certo. Mas eu deletei a pasta node_modules , yarn.lock , executei os comandos ./gradlew clean e ./gradlew cleanBuildCache e executei npx react-native run-android novamente.

Estou enfrentando o mesmo problema no momento em RN 0.61.4 e axios 0.19.2. Também tentei comentar initializeFlipper(this); cleanBuildCache e ainda recebendo Network Error .

abra a pasta android e procure pelo arquivo ReactNativeFlipper.java e
comente a linha número 43
// builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));

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

No meu caso, não tenho esse arquivo no meu projeto

No meu caso, não tenho esse arquivo no meu projeto
você tem pasta android
se você tiver pesquisa dentro da pasta do aplicativo

RNFetchBlob.wrap

Obrigado. Eu tenho uma pergunta. Esta função RNFetchBlob.wrap está convertendo o arquivo para base64 ?

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

O mesmo aqui, por exemplo, tentar fetch("https://www.mocky.io/v2/5185415ba171ea3a00704eed") aumenta TypeError: Network request failed .
Isso acontece apenas no Android, tanto na depuração quanto na versão, e com depuração remota e sem.
Adicionar android:usesCleartextTraffic="true" não ajudou (mas é para solicitações não SSL de qualquer maneira).
Usando RN 0.62.2.

Editar: buscar https://jsonplaceholder.typicode.com/todos/1 funciona! Como alguns sites podem funcionar e outros não?!

Atualização, depois de fazer alguns testes , chegamos à conclusão de que é devido a falhas nos certificados SSL. Não sabemos o que há de errado com isso, mas o problema também acontece no Postman com a opção "Verificação de certificado SSL" ativada. Será que a autoridade de certificação não está na lista do telefone?

Acabei de passar o último dia lutando com esse problema. Prefixar meu caminho absoluto com "file://" para que você termine com três / resolveu o problema para mim.

Um caminho de exemplo:

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

Exemplo do meu código:

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

Estou usando react-native@^0.62.2

A correção foi lançada? Como atualizamos?

Ainda recebendo em 0.62.2, há alguma atualização sobre isso?

Quem ainda está lutando com este problema. está acontecendo por causa do plugin de rede Flipper.
Eu desabilitei e as coisas funcionam muito bem.
Minha solução para fazer isso funcionar é comentar a linha 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);

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

Ainda acontecendo em 0.62.2, e isso corrige temporariamente o problema no Android

Isso corrige isso por enquanto.

Quem ainda está lutando com este problema. está acontecendo por causa do plugin de rede Flipper.
Eu desabilitei e as coisas funcionam muito bem.

Minha solução para fazer isso funcionar é comentar a linha 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);

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

isto fez o meu dia! funciona bem com RN 0.62.0. obrigada!

O Flipper publicou uma atualização, confira o comentário mais recente https://github.com/facebook/flipper/issues/993#issuecomment -619823916 O react-native publicará uma atualização para refletir essa correção?

Ainda recebendo um Network request failed com esse novo Flipper 0.39.0 ao tentar fetch("https://www.mocky.io/v2/5185415ba171ea3a00704eed") , mesmo que funcione no Chrome/Firefox/Safari.

@antoinerousseau Você pode querer dizer lá... Eu não testei.

@aprilmintacpineda que postei em https://github.com/facebook/react-native/issues/26939 , parece mais relacionado e não tenho certeza se é relacionado ao Flipper?

Este problema é resolvido atualizando o Flipper neste arquivo

/yourproject/android/gradle.properties Linha 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

eu tenho o mesmo problema com react 0.61.4

Obrigado @alfianwahid
Resolveu meu problema.

podemos fechar este ticket?

Me ajudou também 💪

@abumostafa , Obrigado mano, salvou minha pesquisa de 48 horas

podemos fechar este ticket?

Estou confuso. Por que você deseja fechar este problema se você encontrou apenas uma solução alternativa e o problema não foi corrigido?

Olá a todos, também tentei com axios e fetch mas nada disso funcionou, também tentei comentar a linha Flipper e atualizá-la, mas também não surtiu efeito. Se vocês ainda estão tendo problemas com isso, melhor tentar fazer sua solicitação POST com XMLHttpRequest funcionou para mim.
Espero que ajude.

Esse problema ocorre também do meu lado, e adivinhe o que está ocorrendo apenas no modo de depuração. Tentei construir em internalRelease e funciona bem. Eu acho que é por causa do recarregamento automático/rápido no modo de depuração que aplica alguma comunicação de flipper que parece estar relacionada a este problema.

Outro problema aqui é que não há erro no logcat android .. Também passei alguns dias pesquisando como corrigir esse problema ainda sem sorte.

Como você resolveu? @trglairnarra

Estou enfrentando o mesmo problema, para RN 0.62.0 e 0.62.1 lança este erro: Network request filed .
Todas as solicitações funcionam, exceto a postagem da imagem

Mesmo aqui. Como você resolveu? Meu aplicativo está funcionando bem no modo de lançamento, mas não no modo de compilação

Quem ainda está lutando com este problema. está acontecendo por causa do plugin de rede Flipper.
Eu desabilitei e as coisas funcionam muito bem.

Minha solução para fazer isso funcionar é comentar a linha 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);

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

Você salvou meu dia. Muito obrigado :) Mas é seguro fazê-lo para futuras compilações?

Oi, eu ainda estou recebendo o problema em 62.2.
Soluções tentadas

  1. android:usesCleartextTraffic="true" => Mesmo todas as outras APIs funcionando, também tenho HTTP.
  2. comentando a linha número 43
  3. nenhum problema com "file://", => mesmo sem adicionar imagem, apenas adicionamos json formdata ainda recebendo o mesmo erro.

Oi, eu ainda estou recebendo o problema em 62.2.
Soluções tentadas

  1. android:usesCleartextTraffic="true" => Mesmo todas as outras APIs funcionando, também tenho HTTP.
  2. comentando a linha número 43
  3. nenhum problema com "file://", => mesmo sem adicionar imagem, apenas adicionamos json formdata ainda recebendo o mesmo erro.

@jamisonrachford tente fazer seu pedido com XMLHttpRequest

Este problema é resolvido atualizando o Flipper neste arquivo

/yourproject/android/gradle.properties Linha 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 (comentário)

fazer manualmente FLIPPER_VERSION=0.41.0 em vez de usar o padrão FLIPPER_VERSION=0.33.1 com RN 0.62.2 faz com que a compilação falhe (imagem anexada). Estou faltando uma etapa na atualização da versão flipper?
gradle issues

Estou usando expo. Como posso resolver isso?

Este problema é resolvido atualizando o Flipper neste arquivo

/yourproject/android/gradle.properties Linha 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 (comentário)

Tks muito!

Este problema é resolvido atualizando o Flipper neste arquivo

/yourproject/android/gradle.properties Linha 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 (comentário)
Obrigado!
Esse problema me incomodou por dois dias

Estou usando o cliente expo, tem que haver uma solução para isso? Estou procurando a dias e sem sucesso, alguém pode me ajudar como podemos conseguir isso na expo?

@Hiti3 Estou usando expo também. Também estou procurando uma solução. O que estou fazendo agora é enviar uma string base64 (sem formData) e decodificá-la no lado do servidor:

Exposição
`import * como ImagePicker de 'expo-image-picker';

// Seletor de imagem
exportar padrão assíncrono () => {
permissão const = await ImagePicker.requestCameraRollPermissionsAsync();
if (permission.granted === 'false') return 'denied';
const options = { allowEditing: true, base64: true };
const resultado = ImagePicker.launchImageLibraryAsync(options);
retorno resultado;
};
`

Lado do servidor
`
const afiado = require('afiado');
export.uploadImage = async (req, res, próximo) => {
const { imagem } = req.body;
const {
tipo: tipo de imagem,
nome: nomedaimagem,
base64: imagemBase64,
caminho: caminho da imagem,
redimensionar,
} = imagem;

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

var img = new Buffer(base64Data, 'base64');
caminho const = __dirname + ./../../public/${imagePath}/${imageName} ;

if (redimensionar) {
experimentar {
aguarde afiado(img)
.resize(500, 500)
.toFormat('jpeg')
.jpeg({ qualidade: 90 })
.toFile(caminho);
} pegar (errar) {
console.log('erro de escrita', err);
}
}
if (!redimensionar) {
experimentar {
await sharp(img).toFormat('jpeg').jpeg({ quality: 90 }).toFile(path);
} pegar (errar) {
console.log('erro de escrita', err);
}
}
req.image = { imageType, imageName, imagePath };
Próximo();
};
`

Ajude ajudou. Se você tiver algum problema, por favor me envie uma mensagem.

Obrigado pela solução fornecida, isso funciona como testado, eu só quero
tenha certeza novamente antes que eu abandone o navio e perca um dia, talvez. E você é
fazendo upload de vídeo ou imagem se eu entendi corretamente?

Em ter, 19 de maio de 2020, 21:44 Gustavo Leite Silvano, [email protected]
escrevi:

@Hiti3 https://github.com/Hiti3 Estou usando expo também. eu também sendo
em busca de uma solução. O que estou fazendo agora é enviar uma string base64 (não
formData) e decodificá-lo no lado do servidor:

Exposição
`import * como ImagePicker de 'expo-image-picker';

// Seletor de imagem
exportar padrão assíncrono () => {
permissão const = await ImagePicker.requestCameraRollPermissionsAsync();
if (permission.granted === 'false') return 'denied';
const options = { allowEditing: true, base64: true };
const resultado = ImagePicker.launchImageLibraryAsync(options);
retorno resultado;
};
`

Lado do servidor
`
const afiado = require('afiado');
export.uploadImage = async (req, res, próximo) => {
const { imagem } = req.body;
const {
tipo: tipo de imagem,
nome: nomedaimagem,
base64: imagemBase64,
caminho: caminho da imagem,
redimensionar,
} = imagem;

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

var img = new Buffer(base64Data, 'base64');
const caminho = __dirname + ./../../public/${imagePath}/${imageName};

if (redimensionar) {
experimentar {
aguarde afiado(img)
.resize(500, 500)
.toFormat('jpeg')
.jpeg({ qualidade: 90 })
.toFile(caminho);
} pegar (errar) {
console.log('erro de escrita', err);
}
}
if (!redimensionar) {
experimentar {
await sharp(img).toFormat('jpeg').jpeg({ quality: 90 }).toFile(path);
} pegar (errar) {
console.log('erro de escrita', err);
}
}
req.image = { imageType, imageName, imagePath };
Próximo();
};
`

Ajude ajudou. Se você tiver algum problema, por favor me envie uma mensagem.


Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/facebook/react-native/issues/28551#issuecomment-631041471 ,
ou cancelar
https://github.com/notifications/unsubscribe-auth/ACGFH2MSYJ2J5YDRASXISOTRSLOQFANCNFSM4MCRHIRA
.

0.41.0

Muito obrigado.

Este problema é resolvido atualizando o Flipper neste arquivo
/yourproject/android/gradle.properties Linha 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 (comentário)

Tks muito!

@Hiti3 Apenas imagem. Mas eu acho que você pode enviar vídeos também.

Obrigado @alfianwahid
mas eu usei
FLIPPER_VERSION=0.44.0

Eu costumava ter o mesmo problema, tentei de tudo e fiquei preso nisso por 4-5 dias, então usei o pacote RN-FETCH-BLOB, ele realmente resolveu o problema de enviar os arquivos. use-o você nunca vai se arrepender

Depois de aplicar as duas correções acima, ainda estou recebendo falha na solicitação de rede. No meu caso o arquivo está sendo atualizado no servidor mas dá o erro.

pode ser um problema da maneira como você está enviando os dados

pode ser um problema da maneira como você está enviando os dados

Eu estou olhando para isso. Mas se o método de envio não estiver correto, por que os dados estão sendo atualizados no servidor.

Eu tentei todas as soluções, mas sem sucesso no Android. estou usando 0.62.2
Screen Shot 2020-05-31 at 6 40 53 PM

@tamangsuresh Ei cara, você encontrou uma correção para isso?

@Brianop nenhum homem

obrigado disse para atualizar o flipper, eu resolvi

Ei, alguém conseguiu resolver o problema?, estou enfrentando o mesmo problema.

Oi, alguém já resolveu esse problema? , Eu também estou enfrentando o mesmo problema.
Você precisa atualizar o flipper para o mais recente

@liyuewen eu tenho flipper de atualização no projeto RN e flipper também. Mas nenhum sucesso.

@liyuewen Eu também tenho a atualização do flipper e o flipper no projeto RN. Mas sem nenhum sucesso.

Após a atualização, você precisa limpar o cache do Android

@liyuewen Eu também fiz isso. Mas sem sorte.

Este problema é resolvido atualizando o Flipper neste arquivo

/yourproject/android/gradle.properties Linha 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 (comentário)
Na minha versão do flipper do projeto está disponível neste local D:myProjectnode_modulesreact-nativetemplateandroidgradle.properties. Eu atualizei o flipper no gradle neste local e no outro gradle.properties que está localizado em /myProject/android/gradle.properties. Também os dados são atualizados no servidor e eu testei no Postman também funcionando bem no Postman. Também comentei o código contado por @abumostafa

@liyuewen eu fiz isso também. Mas sem sorte.

Minha versão é "react native": "^ 0.62.2", que será bem sucedida no futuro

Atualizando o Flipper para 0,45, resolva o problema

Não estou usando o Flipper em nenhum lugar, ainda estou com o mesmo problema :(

Não estou usando o Flipper em nenhum lugar, ainda estou com o mesmo problema :(

O mesmo aqui, usando Expo. Isso não deve ser um problema para tantas pessoas, especialmente ao usar o espaço de trabalho gerenciado onde o recurso é apresentado de forma ambígua como uma função de trabalho.

Alguém tem atualizações sobre este problema. Eu tentei atualizar o flipper, comentando o flipper na atividade principal. Ainda com esse problema no android.
Retorna [TypeError: falha na solicitação de rede].
Mas o mesmo código funciona bem no iOS

Alguém tem atualizações sobre este problema. Eu tentei atualizar o flipper, comentando o flipper na atividade principal. Ainda com esse problema no android.
Retorna [TypeError: falha na solicitação de rede].
Mas o mesmo código funciona bem no iOS

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

A remoção desta linha em MainApplication.java funciona. O problema ainda está lá na compilação de depuração. mas funciona na versão build.

Alguém tem atualizações sobre este problema. Eu tentei atualizar o flipper, comentando o flipper na atividade principal. Ainda com esse problema no android.
Retorna [TypeError: falha na solicitação de rede].
Mas o mesmo código funciona bem no iOS

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

A remoção desta linha em MainApplication.java funciona. O problema ainda está lá na compilação de depuração. mas funciona na versão build.

Obrigado, eu nunca tentei testar na compilação de lançamento. Vou tentar isso hoje.

Eu tenho react-native v59. Então, o que as pessoas que não usam o Flipper podem fazer? Alguma atualização?

Aqui estão todos os dados relevantes que eu poderia pensar em extrair do meu aplicativo. Estou enfrentando o mesmo problema, no simulador do iOS.

RN 0.62.2, Flipper 0.46.0, em um aplicativo Expo ejetado.

  // 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: Falha na solicitação de rede
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]

O Info.plist está configurado para permitir solicitações de localhost.

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

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

E meu 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

Eu tenho react-native v59. Então, o que as pessoas que não usam o Flipper podem fazer? Alguma atualização?

Não tive esse problema nas versões anteriores. Seu problema pode ser algo diferente, eu acho. Você está usando URL https?

Eu tenho react-native v59. Então, o que as pessoas que não usam o Flipper podem fazer? Alguma atualização?

Não tive esse problema nas versões anteriores. Seu problema pode ser algo diferente, eu acho. Você está usando URL https?

Sim, https.
Existem limitações para o objeto formData no RN, por exemplo, pode ser um comprimento de string ou tamanho formData? Parece que o RN intercepta essa solicitação e lança esse erro

Eu tenho react-native v59. Então, o que as pessoas que não usam o Flipper podem fazer? Alguma atualização?

Não tive esse problema nas versões anteriores. Seu problema pode ser algo diferente, eu acho. Você está usando URL https?

Sim, https.
Existem limitações para o objeto formData no RN, por exemplo, pode ser um comprimento de string ou tamanho formData? Parece que o RN intercepta essa solicitação e lança esse erro

Não tenho conhecimento de tais limitações. Você pode compartilhar o código? E isso funcionou no iOS?

Eu preciso alcançar essa estrutura do corpo da solicitação:

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

onde o arquivo é um objeto de arquivo JS com campos name , type , uri , size , etc.

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

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

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

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

image

Eu tive esse problema no meu projeto com a versão nativa de reação 0.62.
Atualizei o flipper para "0.41.0" e funcionou.
Em gradle.properities
FLIPPER_VERSION=0.41.0

Eu tive esse problema no meu projeto com a versão nativa de reação 0.62.
Atualizei o flipper para "0.41.0" e funcionou.
Em gradle.properities
FLIPPER_VERSION=0.41.0

Você pode, por favor, mencionar o caminho de gradle.properties, gradle.properties no Android não contém a versão flipper. Mas gradle.properties na pasta react android tem versão flipper.

@nharis7 está em /android/gradle.properties
Annotation 2020-06-12 210640
Mas qual é a sua versão de react-native? flipper está apenas na versão react-native 0.62 e superior. Não há nadadeira nas versões antigas.

@nharis7 está em /android/gradle.properties
Annotation 2020-06-12 210640
Mas qual é a sua versão de react-native? flipper está apenas na versão react-native 0.62 e superior. Não há nadadeira nas versões antigas.

Atualmente estou em 0.62.2 e atualizei meu projeto de 0.61 em meu /android/gradle.properties. Eu criei um novo projeto com ele agora posso ver a versão do flipper em /android/gradle.properties. Vou migrar todas as minhas coisas para um novo projeto e ver se esses problemas são resolvidos ou não.

ESSA SOLUÇÃO FUNCIONOU PARA MIM
https://github.com/axios/axios/issues/1567#issuecomment -518118223

Atualizar o flipper corrige isso! (eu atualizei para 0.46.0)

Eu tentei todo o caminho acima!
apenas atualizar o flipper para 0,46 pode corrigi-lo!

image

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

Este problema é resolvido atualizando o Flipper neste arquivo

/yourproject/android/gradle.properties Linha 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 (comentário)

Funcionou muito bem, isso resolveu o problema no android, muito obrigado.

Eu enfrentei o mesmo problema, isso acontece no Android, mas funciona bem no IOS.
Eu acho que esta questão sobre a Rede Flipper.

Por enquanto, comentei
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

neste arquivo
/android/app/src/main/java/com/{your_project}/MainApplication.java

It worked for me :)

Eu enfrentei o mesmo problema, acontece no Android, mas funciona bem no IOS.
Eu acho que esta questão sobre Flipper Network.

Por um tempo, comentei
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

neste arquivo
/android/app/src/main/java/com/{your_project}/MainApplication.java

eu testei com isso, então eu consegui fazer o upload do arquivo

obrigado @alfianwahid

Atualizar o flipper para 0.46.0 corrige isso!

Dentro
android\gradle.properties

Esse problema me levou mais de 5 horas para resolver. Eu estava prestes a desistir quando finalmente consegui resolver o problema.

O problema que eu estava enfrentando, próximo ao que você está mencionando, é que eu estava recebendo NetworkError ao usar o expo-image-picker e tentando fazer o upload do arquivo usando axios . Estava funcionando perfeitamente no iOS, mas não funcionava no Android.

Foi assim que resolvi o problema.

Há duas questões independentes em ação aqui. Digamos que recebemos imageUri do selecionador de imagens, então usaríamos as seguintes linhas de código para fazer o upload do frontend.

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

O primeiro problema é com o próprio imageUri . Se vamos dizer que o caminho da foto é /user/.../path/to/file.jpg . Em seguida, o seletor de arquivos no Android daria o imageUri como file:/user/.../path/to/file.jpg enquanto o seletor de arquivos no iOS daria imageUri como file:///user/.../path/to/file.jpg .

A solução para o primeiro problema é usar file:// em vez de file: no formData no android.

A segunda questão é que não estamos usando o tipo mime adequado. Está funcionando bem no iOS, mas não no Android. O que torna isso pior é que o pacote do seletor de arquivos fornece o tipo do arquivo como "imagem" e não fornece o tipo mime adequado.

A solução é usar o tipo mime adequado no formData no campo type . Ex: tipo mime para o arquivo .jpg seria image/jpeg e para o arquivo .png seria image/png . Não precisamos fazer isso manualmente. Em vez disso, você pode usar um pacote npm muito famoso chamado mime .

A solução de trabalho final é:

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 isso ajude a resolver seu problema. :)

Quando você tem um erro de rede com formData, você deve verificar a exatidão de formData. Isso é muito importante.

android/gradle.properties
atualizar Fliper
FLIPPER_VERSION=0.41.0

Pessoas que ainda estão enfrentando problemas podem fazer assim

deixe dados = new FormData();

data.append('ação', 'ADICIONAR');
data.append('param', 0);
data.append('secondParam', 0);
data.append('file', new Blob([payload], { type: 'text/csv' }));

// isso funciona
deixe pedido = new XMLHttpRequest();
request.open('POST', url);
request.send(dados);

vai funcionar (:+1: (:100:

Parece que muitas pessoas conseguiram contornar isso atualizando sua versão do flipper. O que é ótimo. Mas também muitas pessoas passaram por dor para encontrar esse problema e serem desbloqueadas.

Então, pergunte: O que tornaria mais fácil descobrir isso? Problema fixado? Um problema encerrado (já que parece resolvido?) ainda pode ser descoberto? Link de estouro de pilha? Parece que isso está resolvido, mas não queremos que as pessoas continuem perdendo tempo tentando encontrar uma solução conhecida.

Isso deve ser fechado assim que a atualização chegar - https://github.com/facebook/react-native/pull/29033. Até que isso aconteça, podemos considerar fixá-lo.

Eu ainda tenho o mesmo problema depois de atualizar a versão do flipper para 0.46.0

Eu também tendo o mesmo problema. Alguém por favor nos ajude

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

Eu não o que eu fiz de errado alguém pode me ajudar a corrigir ??

Se atualizei FLIPPER_VERSION=0.41.0 o próprio aplicativo nem abre.

Talvez isso ajude alguém que ainda está tendo problemas com isso.
Você está usando as políticas WAF (Web Application Firewall) da Microsoft? Se for assim; eles têm um bug (ou React Native, não tenho certeza de quem é o culpado exatamente) que bloqueia solicitações com um Mas apenas às vezes, e apenas no iOS. O limite de formulário de várias partes que é gerado no nível mais baixo em RN às vezes contém caracteres (provavelmente um . ) que as políticas bloqueiam.

Isso nos custa muitos dias para descobrir. A Microsoft reconheceu. Desativamos a política WAF relacionada para contornar o problema. Isso não acontece no PostMan, por exemplo. Isso gera um limite diferente do que o RN.

Atualizando flipper para 0.44.0 e React-native 0.63.0 , ainda tenho o mesmo problema

Eu consertei comentando uma linha no
/android/app/src/debug/java/com/{your-app-name}/ReactNativeFlipper.java
Arquivo.
esta é a única correção que funcionou para mim!

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

Se você tentou tudo acima e nada o ajuda, e você está usando o seletor de imagens e dados de formulário, tente adicionar isso nas opções do seletor de imagens:
``` js
deixe opções = {
title: 'Selecionar imagem',
noData: verdadeiro,
maxWidth: 500,
maxAltura: 500,
};
ImagePicker.showImagePicker(opções, resposta => {
.
.

Form data should look like this then:

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

Eu enfrentei o mesmo problema, acontece no Android, mas funciona bem no IOS.
Eu acho que esta questão sobre Flipper Network.

Por um tempo, comentei
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

neste arquivo
/android/app/src/main/java/com/{your_project}/MainApplication.java

Eu tive esse problema no meu projeto com a versão nativa de reação 0.62.
Atualizei o flipper para "0.41.0" e funcionou.
Em gradle.properities
FLIPPER_VERSION=0.41.0

Ambos funcionam para mim. Mas use apenas uma solução. Obrigado a ambos. @alfianwahid @dmobisoft
Pense em uma solução FLIPPER_VERSION=0.41.0 melhor.

Alguém de desenvolvedores nativos do React está ciente desse problema trêmulo, já que qualquer pessoa com MANAGED WORKSPACE (ex. Expo) é incapaz de implementar "soluções" propostas com o hack RN Flipper. Alguma solução proposta do seu lado para espaços de trabalho gerenciados como Expo?

Oi @Hiti3 Eu sugiro criar um problema no repositório Expo aqui: https://github.com/expo/expo , pois as soluções aqui não se aplicariam a um espaço de trabalho gerenciado.

cc @brentvatne

@Hiti3 - isso não afeta os aplicativos de exposição gerenciada porque o flipper não está integrado neles. se você estiver vendo esse erro, é por outros motivos que não os mencionados neste problema, e seu melhor curso de ação se você não conseguir encontrar uma solução é criar um mcve e publicá-lo em https://github.com/ expo/expo/questões

Para mim também não está funcionando dando erro [TypeError: Network request failed]

CÓDIGO :

const nome de usuário = this.state.values.username;
const sobrenome = this.state.values.lastname;
const images_path= this.state.images_list[0].url.uri;

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

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

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

Para mim também não está funcionando dando erro [TypeError: Network request failed]

CÓDIGO :

const nome de usuário = this.state.values.username;
const sobrenome = this.state.values.lastname;
const images_path= this.state.images_list[0].url.uri;

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

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

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

Você deu o endereço IP como uma string URL é uma verificação errada mais uma vez.

quando eu posto sem arquivo (imagem) eu vou funcionar bem, quando eu envio com arquivo de imagem dessa vez mostrando erro [TypeError: Network request failed]; não desconfie do URL

Eu consertei comentando uma linha no
/android/app/src/debug/java/com/{your-app-name}/ReactNativeFlipper.java
Arquivo.
esta é a única correção que funcionou para mim!

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

Tente este funcionou para mim

Eu também tenho o mesmo problema. Eu uso hack para isso https://github.com/facebook/react-native/issues/29021#issuecomment -662196480.

Se você tiver a versão 0.37.0 do flipper, coloque-a na 0.41.0, funcionou no meu.

Eu enfrentei o mesmo problema, acontece no Android, mas funciona bem no IOS.
Eu acho que esta questão sobre Flipper Network.

Por um tempo, comentei
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

neste arquivo
/android/app/src/main/java/com/{your_project}/MainApplication.java

Muito obrigado funcionou perfeitamente no meu projeto.
Eu só quero saber como você pode descobrir que o inicializador Flipper foi a causa do bug?

@alfianwahid

Apenas para compartilhar. Para Android, você pode tentar atualizar a versão do flipper para 0.41, então funcionará bem. Mas para o IOS, ainda enfrento o mesmo problema, mesmo a versão do flipper do IOS é 0.41.5. Portanto, para o IOS, atualizo manualmente o node_modules/react-native/Libraries/Network/RCTNetworkTask.mm e está funcionando no IOS agora.

por favor, você pode me dizer como atualizar o flipper FLIPPER_VERSION=0.33.1 para 0.41

@sureshhallyali , você pode atualizar FLIPPER_VERSION=0.41.0 no arquivo android/gradle.properties. Depois disso, limpe a compilação do Android e execute o Android novamente.

Apenas para compartilhar, estou usando o Flipper 0.50 no meu Ubuntu e atualizando android/gradle.properties para FLIPPER_VERSION=0.50.0 funcionou muito bem também.

Eu tentei todas as soluções acima (desde atualizar o flipper até comentar para excluir a pasta de depuração e tudo), e nenhuma funcionou para mim, ainda estou recebendo network error embora a imagem seja salva no servidor. react-native 0.62.2 , estou tentando há 2 dias, isso é realmente frustrante ...

este é o meu código

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 (em resumo)

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

Este problema foi corrigido em 0.63.1 ?

ATUALIZAR:
Atualizado para 0.63.2 ainda, o problema persiste

Apenas para compartilhar, estou usando o Flipper 0.50 no meu Ubuntu e atualizando android/gradle.properties para FLIPPER_VERSION=0.50.0 funcionou muito bem também.

@vinifraga , como você atualiza a versão do Flipper no IOS? Eu sei como atualizar no Android, mas não tenho certeza de como atualizar do ios/podfile lá?

Oi pessoal, experimente rn-fetch-blob isso funciona para mim
eu estava usando o Axios para fazer upload de imagem, mas não estava funcionando para android, então depois de tantas pesquisas encontrei este pacote e funcionou

Link aqui para o pacote

Tentei de tudo (outros lib também rn-fetch-upload, rn-background-upload, ...), o upload de imagens não está funcionando no iOS e está bem no Android. Carregar no S3 usando URL pré-assinado sempre me retornando isso (estava funcionando bem em RN -v 0.59.x, e não mais em RN -v 0.61.x:
````
"
EntityTooLarge
Seu upload proposto excede o tamanho máximo permitido
2025220
2023115
{...}
5n+{...}
"

@MayoudP tente rn-fetch-blob talvez isso funcione

Obrigado @abumostafa

Eu tentei toda esta solução, mas não está funcionando
1: precisa adicionar
uesCleartextTraffic="true" para o arquivo AndroidManifest.xml encontrado dentro do diretório android/app/src/main/AndroidManifest.xml
para lidar com http e https

2: precisa comentar
// initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
neste arquivo /android/app/src/main/java/com/{your_project}/MainApplication.java
3: precisa comentar
// builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
em seu arquivo android/app/src/debug/java/com/{your_project}/ReactNativeFlipper.java
4: alguém disse que a atualização reage nativo para 63.2 que também fez
5: Atualização da versão FLIPPER para 50.0

precisa tentar agora um: rn-fetch-blob
https://github.com/facebook/react-native/issues/29493

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

finalmente funcionou no android

Usando rn-fetch-blob para as chamadas de API onde os dados do formulário são necessários funciona (iOS confirmado, ainda não tenho certeza sobre o Android), acabei de substituir minhas chamadas de busca regulares lá (consulte leia-me):

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

Esse problema realmente persiste por uns 4 meses?

@MayoudP tente rn-fetch-blob talvez isso funcione

Não, não funcionou, não conseguiu fazer funcionar usando uma URL pré-assinada e S3 ...

Apenas para compartilhar. Para Android, você pode tentar atualizar a versão do flipper para 0.41, então funcionará bem. Mas para o IOS, ainda enfrento o mesmo problema, mesmo a versão do flipper do IOS é 0.41.5. Portanto, para o IOS, atualizo manualmente o node_modules/react-native/Libraries/Network/RCTNetworkTask.mm e está funcionando no IOS agora.

@anthony1110 O que você atualiza em node_modules/react-native/Libraries/Network/RCTNetworkTask.mm ?

@MayoudP tente rn-fetch-blob talvez isso funcione

Não, não funcionou, não conseguiu fazer funcionar usando uma URL pré-assinada e S3 ...

Apenas RNFS funciona rn

@andrekovac , você pode seguir este tópico e seguir a solução IOS e Android. https://github.com/facebook/react-native/issues/29021#issuecomment -664030881

Aplicar o patch @anthony1110 mencionado não funciona para mim. Ainda recebendo erros de rede.

Mas uma solução (para React Native 0.63 ) parece estar chegando em breve: https://github.com/facebook/react-native/issues/29364#issuecomment -664526253

@andrekovac , não siga meu patch, esse é hack. Solução ruim. Você deve seguir a atualização https://github.com/facebook/react-native/issues/29364#issuecomment -663005914 para o problema do IOS.

Quem ainda está lutando com este problema. está acontecendo por causa do plugin de rede Flipper.
Eu desabilitei e as coisas funcionam muito bem.

Minha solução para fazer isso funcionar é comentar a linha 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);

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

eu tento isso e funciona 100%

Quem ainda está lutando com este problema. está acontecendo por causa do plugin de rede Flipper.
Eu desabilitei e as coisas funcionam muito bem.

Minha solução para fazer isso funcionar é comentar a linha 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);

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

Isso funciona (Y)

Esse bug vai me deixar louco
Todas as soluções acima não estão funcionando

Ei @victor012888 tentei o rn-fetch-blob

Eu uso o upload FLIPPER_VERSION=0.50.0 maneira finalmente resolvido
Meu problema é INSTALL_FAILED_INSUFFICIENT_STORAGE porque os novos pacotes são muito grandes
Depois de adicionar mais RAM para a máquina virtual, tudo está funcionando

Eu tentei de tudo, ainda tenho problema.
não apenas a versão de depuração, mas a versão de lançamento.

Resolvi meu problema agora!
①atualizar FLIPPER_VERSION=0.52.0 mais recente

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

o tipo deve ser 'multipart/form-data' , o mesmo com o cabeçalho do post.


espero que possa ajudar alguém

Eu uso o upload FLIPPER_VERSION=0.50.0 maneira finalmente resolvido
Meu problema é INSTALL_FAILED_INSUFFICIENT_STORAGE porque os novos pacotes são muito grandes
Depois de adicionar mais RAM para a máquina virtual, tudo está funcionando

como atualizar o FLIPPER

Estou com esse problema, comecei no RN63+ e não tenho nadadeira. Flipper é completamente desinstalado.

Também só acontece para uploads de arquivos com multipart/form-data , o tipo é definido. Mas a solicitação é ignorada todas as vezes no Android.

Olá, estou usando expo 38 com RN 0.62.2
Estou usando o fluxo de trabalho simples, para que eu possa editar o código nativo.
Eu tenho os mesmos problemas, embora eu tenha tentado todas as correções listadas:

  • Flipper atualizado em gradle.properties para 0.52.0
  • comentou a linha initializeFlipper em MainApplication.java
  • Tentei todas as configurações possíveis para o tipo de parâmetro formData 'arquivo'.

Meu código está assim

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
}

Alguma ideia do que posso estar perdendo?

Infelizmente, as soluções mencionadas sobre comentar linhas de código do Flipper e tal não funcionaram para mim.

Eu consegui fazer isso funcionar usando rn-fetch-blob .

Abaixo está um pedaço de código mostrando como eu usei essa biblioteca para fazer upload de um arquivo 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>),
    },
  ]
)

Eu enfrentei o mesmo problema, acontece no Android, mas funciona bem no IOS.
Eu acho que esta questão sobre Flipper Network.

Por um tempo, comentei
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

neste arquivo
/android/app/src/main/java/com/{your_project}/MainApplication.java

Mano, funciona perfeitamente, obrigado 👍

Olá, estou usando expo 38 com RN 0.62.2
Estou usando o fluxo de trabalho simples, para que eu possa editar o código nativo.
Eu tenho os mesmos problemas, embora eu tenha tentado todas as correções listadas:

  • Flipper atualizado em gradle.properties para 0.52.0
  • comentou a linha initializeFlipper em MainApplication.java
  • Tentei todas as configurações possíveis para o tipo de parâmetro formData 'arquivo'.

[...]

Ahhhh descobri o que estava perdendo!
No meu caso, eu estava alimentando o cabeçalho errado para minha chamada de busca, devido a uma pasta de cópia antiga >.<
eu estava usando

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

quando em vez disso deveria ter sido:

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

A parte complicada é que:

  1. este erro funciona no iOS
  2. sempre foi assim no Android por meses sem problemas para fazer upload de arquivos

Parece que desde as últimas atualizações do RN, tais erros não são mais tolerados usando o Android.

Eu enfrentei o mesmo problema, acontece no Android, mas funciona bem no IOS.
Eu acho que esta questão sobre Flipper Network.

Por um tempo, comentei
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

neste arquivo
/android/app/src/main/java/com/{your_project}/MainApplication.java

Eu estava recebendo stream closed ao tentar fazer upload para o S3 com XHR e isso resolve o problema e obrigado 👍

Atualizei o Flipper para a versão 0.51.2 e funcionou para mim.

Atualizei o Flipper para a versão 0.51.2 e funcionou para mim.

Olá @omid-ebrahimi, como você atualizou a versão do Flipper?

Obrigada

mesmo problema 0.63.2

Atualizei o Flipper para a versão 0.51.2 e funcionou para mim.

Olá @omid-ebrahimi, como você atualizou a versão do Flipper?

Obrigada

Vá para android/gradle.properties e adicione esta linha

FLIPPER_VERSION=0.52.1

Você deve ter as seguintes linhas em seu 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'
    }

    // ...
}

Atualizei o Flipper para a versão 0.51.2 e funcionou para mim.

Olá @omid-ebrahimi, como você atualizou a versão do Flipper?
Obrigada

Vá para android/gradle.properties e adicione esta linha

FLIPPER_VERSION=0.52.1

Você deve ter as seguintes linhas em seu 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'
    }

    // ...
}

A atualização do flipper @omid-ebrahimi também resolve o problema, obrigado, e abri um problema sobre isso no StackOverflow com a recompensa, envie esta resposta para lá e posso conceder a recompensa a você.

Eu atualizo o flipper para a versão 52.0
e use fetch e funcionou para mim
Mas quando usar axios.post não funciona
E quando usar axios como
axios({ method:'post , data : file , url:'something ',............. })
funciona bem

E não defina o cabeçalho
'Content-Type': 'multipart/form-data'
também vai funcionar bem

Quem ainda está lutando com este problema. está acontecendo por causa do plugin de rede Flipper.
Eu desabilitei e as coisas funcionam muito bem.

Minha solução para fazer isso funcionar é comentar a linha 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);

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

@abumostafa A solução que você forneceu é eficaz, mas ainda não funciona para arquivos que começam com "file:///".
Por exemplo:

  • Isso pode funcionar: formData.append('files', {uri:'https://xxx.jpg', type:'image/jpeg', name:'test.jpeg' })
  • Isso não funciona: formData.append('files', {uri:'file:///xxx.jpg', type:'image/jpeg', name:'test.jpeg' })

Minha versão nativa do react:

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

o mesmo problema tentou atualizar o flipper, mas não funcionou.

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

Que tal iOS?

Tendo esse problema no iOS também. Tentei alterar a versão do Flipper de 0.33.1 para 0.50.0 e superior no meu Podfile. Isso está acontecendo comigo em

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

A sugestão de @abumostafa fez com que funcionasse para Android, mas ainda não consegui fazê-lo funcionar no iOS.

EDIT: Atualizado para react-native: 0.63.2 ainda o mesmo problema.

Alterar as versões do Flipper não funciona para mim. Eu tentei comentar a linha que pode ter ajudado, mas também enfrentei o mesmo problema. Minha solução é usar um WebView e injectJavascript para fazer os uploads. Este hack funciona bem para mim.

Minha solução é usar <WebView> generateUploadCodes() injetar javascript. injetado no webview.

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

Com isso eu posso simplesmente ligar

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

Para obter a resposta do upload, podemos usar webview.ReactNativeWebView.postMessage('our response'); . Em seguida, processe a resposta por meio do manipulador onMessage do WebView.

Antes de tudo isso, devemos criar nosso ref e nosso componente WebView primeiro assim

  const webview = useRef(null);

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

Reunindo todas as correções aqui, espero que possamos obter uma correção para isso mesclado ao núcleo em breve:

iOS: Reverta um PR, requer a modificação de node_modules: https://github.com/facebook/react-native/issues/29364#issuecomment -671565181, PR enviado aqui para a correção: https://github.com/facebook/react -nativo/puxar/29595

Android: atualize a versão do Flipper https://github.com/facebook/react-native/issues/28551#issuecomment -674351386, PR levantada https://github.com/facebook/react-native/pull/29787

Se alguém ainda estiver enfrentando problemas no RN Versão 0.62 ou superior, a solução é:
Você deve fornecer uri, nome e tipo da mídia que está enviando.

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

Em seguida, vá para a linha número 43 e comente esta linha:
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
em android/app/src/debug/java/com/"nome do projeto"/ReactNativeFlipper.java

Passei cerca de 8 horas cavando a solução para o erro.

Se alguém ainda estiver enfrentando problemas no RN Versão 0.62 ou superior, a solução é:
Você deve fornecer uri, nome e tipo da mídia que está enviando.

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

Em seguida, vá para a linha número 43 e comente esta linha:
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
em android/app/src/debug/java/com/"nome do projeto"/ReactNativeFlipper.java

Passei cerca de 8 horas cavando a solução para o erro.

Sim, esse foi o meu caso também, confirmei aqui: https://github.com/facebook/react-native/issues/29364#issuecomment -679370449

Flipper upgrade PR levantado pelo FB https://github.com/facebook/react-native/pull/29787

Reunindo todas as correções aqui, espero que possamos obter uma correção para isso mesclado ao núcleo em breve:

iOS: Reverta um PR, requer a modificação de node_modules: https://github.com/facebook/react-native/issues/29364#issuecomment -671565181, PR enviado aqui para a correção: https://github.com/facebook/react -nativo/puxar/29595

Android: atualize a versão do Flipper https://github.com/facebook/react-native/issues/28551#issuecomment -674351386, PR levantada https://github.com/facebook/react-native/pull/29787

Eu estava tendo o mesmo problema e nenhuma das soluções aqui funcionou para mim.

O que funcionou foi que estou apenas perdendo o mime_type do meu upload.

Certifique-se de ter esses dados corretamente:

  • uri
  • nome
  • tipo

Trabalhei com a atualização do flipper para FLIPPER_VERSION=0.52.1 .

Altere neste arquivo - android/gradle.properties e execute 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,
});

pacote.json

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

Existe uma solução alternativa para isso usando o Expo?

alguém resolve esse problema? já tentei todos os métodos como comentar algum comando flipper, atualizar o flipper no graddle.properties, mesmo eu rebaixando meu RN de 0,63 para 0,62 ainda recebi esse erro. Já travado neste erro por 2 dias. Quando tento postar dados sem arquivo para minha API, funciona bem, mas quando tento fazer upload de arquivo como imagem para minha API, tenho esses erros

@safaiyeh ainda não funcionou para mim senhor, eu já tentei de tudo.

Se alguém ainda estiver enfrentando problemas no RN Versão 0.62 ou superior, a solução é:
Você deve fornecer uri, nome e tipo da mídia que está enviando.

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

Em seguida, vá para a linha número 43 e comente esta linha:
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
em android/app/src/debug/java/com/"nome do projeto"/ReactNativeFlipper.java

Passei cerca de 8 horas cavando a solução para o erro.

eu fiz o mesmo, mas ainda enfrentando o mesmo problema. estou usando
"reagir": "16.13.1",
"react-native": "0.63.1",

@sadhruva Eu tenho o mesmo ambiente que você e isso resolveu o problema para mim

Estou passando pelo mesmo problema. Esses tipos de erros são frustrantes, pois não há praticamente nada que possamos fazer além de esperar por uma versão corrigida.

Eu tentei:

  • Comentando a linha no arquivo java

  • Mudando minha versão do flipper

  • Escrevendo o código de 2 maneiras diferentes

E ainda não funciona. O estranho é que o formulário FUNCIONA em outras partes do meu aplicativo, mas nessa tela em particular não funciona (apenas no Android, porque no iPhone funciona como esperado).

Então, parece que a única coisa que posso fazer agora é continuar o desenvolvimento apenas para iOS e atrasar o lançamento do Android.

Vida é vida... eu acho.

Estou passando pelo mesmo problema. Esses tipos de erros são frustrantes, pois não há praticamente nada que possamos fazer além de esperar por uma versão corrigida.

Eu tentei:

  • Comentando a linha no arquivo java
  • Mudando minha versão do flipper
  • Escrevendo o código de 2 maneiras diferentes

E ainda não funciona. O estranho é que o formulário FUNCIONA em outras partes do meu aplicativo, mas nessa tela em particular não funciona (apenas no Android, porque no iPhone funciona como esperado).

Então, parece que a única coisa que posso fazer agora é continuar o desenvolvimento apenas para iOS e atrasar o lançamento do Android.

Vida é vida... eu acho.

Experimentando o mesmo problema. No entanto, é estranho que a mesma função funcione bem com o react, então fui verificar os pacotes de rede e descobri que meu pacote de solicitação de rede react webAPP vai com um cabeçalho content- type:multipart/form-data , enquanto RN vai com content -type:application/form-data .
Então eu editei minha função de solicitação assim:
await fetch(url, { method: 'POST', headers: { 'Content-Type': 'multipart/form-data', }, body: formData, })
Em seguida, inclua type&name no formData
let formData = new FormData(); formData.append('file', {uri: fileUri,type:fileType,name:fileName});
Não sei porque, mas funciona milagrosamente.

estou usando a versão nativa 0.63.2 do react e segui estes passos para corrigir o problema
usando react-native-cli

1 - em android/app/src/main/java/com/{yourProject}/MainApplication.java
comentário -> initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

2 - em android/app/src/debug/java/com/{yourProject}/ReactNativeFlipper.java
comentário na linha 43 -> builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));

3 - em android/gradle.properties
alterar FLIPPER_VERSION=0.37.0 para FLIPPER_VERSION=0.52.1

4 - em android/app/build.gradle
substituir as dependências atuais do 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'
    }

    // ...
  }

e depois de todos esses passos -> npx react-native run-android ou yarn android

5 - na minha solicitação de upload de postagem

  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 isto ajude

@mathrocha12100 você pode formatar corretamente seu comentário? Algum código parece estar fora do lugar, posso tentar fazê-lo passo a passo.

O problema é que eu realmente não quero bagunçar a configuração do android. Mas de qualquer forma, formate sua resposta corretamente para ajudar todos que encontrarem esse problema (incluindo eu).

Saúde.

Ainda não funciona.

@dlogvin
Eu enfrentei esse problema ontem e corrigi-o como @omid-ebrahimi disse [upgrade Flipper], além de comentar esta linha
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); a ReactNativeFlipper.java

Limpar pastas de compilação [ios, android]
então construa novamente, funciona bem para mim :)

@dlogvin
Eu enfrentei esse problema ontem e corrigi-o como @omid-ebrahimi disse [upgrade Flipper], além de comentar esta linha
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); a ReactNativeFlipper.java

Limpar pastas de compilação [ios, android]
então construa novamente, funciona bem para mim :)

Como você atualiza exatamente o flipper?

edit: Já tentei substituir a versão FLIPPER e comentar as linhas, mas ainda nada. Na verdade, na versão debug do app, as imagens não carregam depois de comentar as linhas. Isso é uma bagunça completa...

@dlogvin em android/gradle.properties
altere FLIPPER_VERSION=0.37.0 para FLIPPER_VERSION=0.52.1

aqui está a versão react e react-native se você está se perguntando

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

@anastely eu fiz isso ... ainda nada :(

Estou desistindo...

@dlogvin Tentei carregar imagens do servidor e está carregado, então me desculpe :(

se o seu projeto for open source eu posso dar uma olhada

Peço desculpas, mas o projeto não é de código aberto. Já tentei fazer upload de arquivos, o formulário funciona em outras telas, mas nesta em específico não. Vou ter que esperar a atualização do RN, enquanto isso vou só trabalhar a versão do iPhone e manter a versão do Android em BETA.

trabalho para mim eu mudo a versão do flipper no arquivo gradle.setting FLIPPER_VERSION=0.30.2 para FLIPPER_VERSION=0.52.1 então limpe o gradlew e execute o projeto.
em reagir nativo use o método XMLHttpRequest.
export let dataWithImage = async (endPoint, params) => {
let token = await AsyncStorage.getItem('token');
let xhr = new XMLHttpRequest();
deixe formData = new FormData();
for (deixe digitar params) {
formData.append(chave, params[chave]);
}
xhr.withCredentials = true;
xhr.addEventListener('readystatechange', function () {
if (this.readyState === 4) {
console.log(this.responseText, '===> esta é a resposta');
}
});
xhr.open('POST', url + endPoint);
xhr.setRequestHeader('Autorização', 'Portador ' + token);
xhr.send(formData);
};

Estou enfrentando um problema semelhante com uma solicitação POST no meu servidor (HTTPS), funciona bem para iOS, mas não no Android. Tentei desabilitar o flipper e atualizá-lo e ainda com o mesmo problema. Tentei com outro servidor, como (https://jsonplaceholder.typicode.com/) e parece estar funcionando conforme o esperado.

A descrição do erro não me diz muito "Erro de rede" , Já verifiquei as permissões da Internet e defina android:usesCleartextTraffic= "true" no manifesto do Android.

Mesmo problema com fetch ou axios.

Para IOS em
arquivo node_modules/react-native/Libraries/Image/RCTLocalAssetImageLoader.mm

Substituir abaixo

  • -(RCTImageLoaderCancellationBlock)loadImageForURL:(NSURL *)imageURL
    tamanho: (CGSize) tamanho
    escala:(CGFloat)escala
    resizeMode:(RCTResizeMode)resizeMode
    progressHandler:(RCTImageLoaderProgressBlock)progressHandler
    parcialLoadHandler:(RCTImageLoaderPartialLoadBlock)partialLoadHandler
    completeHandler:(RCTImageLoaderCompletionBlock)completionHandler
    {
    UIImage *imagem = RCTImageFromLocalAssetURL(imageURL);
    if (imagem) {
    if (progressHandler) {
    progressHandler(1, 1);
    }
    completeHandler(nil, imagem);
    } outro {
    NSString *message = [NSString stringWithFormat:@"Não foi possível localizar a imagem %@", imageURL];
    RCTLogWarn(@"%@", mensagem);
    completeHandler(RCTErrorWithMessage(message), nil);
    }

    retorno nulo;
    }

Com

  • -(RCTImageLoaderCancellationBlock)loadImageForURL:(NSURL *)imageURL
    tamanho: (CGSize) tamanho
    escala:(CGFloat)escala
    resizeMode:(RCTResizeMode)resizeMode
    progressHandler:(RCTImageLoaderProgressBlock)progressHandler
    parcialLoadHandler:(RCTImageLoaderPartialLoadBlock)partialLoadHandler
    completeHandler:(RCTImageLoaderCompletionBlock)completionHandler
    {
    __block auto cancelado = std::make_shared<:atomic i="44">>(false);
    RCTExecuteOnMainQueue(^{
    if (cancelado->carregar()) {
    Retorna;
    }

    UIImage *imagem = RCTImageFromLocalAssetURL(imageURL);
    if (imagem) {
    if (progressHandler) {
    progressHandler(1, 1);
    }
    completeHandler(nil, imagem);
    } outro {
    NSString *message = [NSString stringWithFormat:@"Não foi possível localizar a imagem %@", imageURL];
    RCTLogWarn(@"%@", mensagem);
    completeHandler(RCTErrorWithMessage(message), nil);
    }
    });

    retornar ^{
    cancelado->loja(true);
    };
    }

Este..

Curta e ame, se funcionar 👍

Olá a todos, uma correção acaba de ser mesclada ao master: https://github.com/facebook/react-native/commit/d8b70b19b39ead4dd41895d666d116a43c56474e

Houve também uma correção do iOS já confirmada no mestre.

Eu coloquei uma solicitação de porta de volta aqui: https://github.com/react-native-community/releases/issues/203#issuecomment -695052285, espere isso em 0.63.3 ou 0.64

@safaiyeh Estou em êxtase agora com este comentário que você adicionou. Espero colocar minhas mãos no desenvolvimento para Android o mais rápido possível.

Saúde.

Muito obrigado.

Sim, que bom que todos vão conseguir a correção em breve 🙇‍♂️ foi um pouco agitado para mim também perseguir as pessoas certas e tal. Chegando perto!

Obrigado, estou no aguardo.
Por enquanto estou usando a mesma solução feita por @mathrocha12100.

Estou enfrentando problema semelhante no iOS. Não é específico para arquivos, mas no iOS minhas chamadas de API falham aleatoriamente, a mesma solicitação de API funcionará uma vez, outra falha com resposta indefinida.
no android está funcionando bem o tempo todo
Estou usando axios 0.19.2, tentei buscar, mas mesmo resultado
Reagir nativo 0.62.2

@vajid-khan você confirmou que o problema está no seu front-end? Tente usar o carteiro ou o Insomnia para verificar se é seu backend, seu código nativo de reação ou se é o próprio framework. Não tive nenhum problema com as solicitações da outra API.

@dlogvin sim, confirmei com o carteiro. Com o carteiro, estou recebendo resposta todas as vezes, até o Android está funcionando o tempo todo. Estou enfrentando isso apenas no iOS

@dlogvin sim, confirmei com o carteiro. Com o carteiro, estou recebendo resposta todas as vezes, até o Android está funcionando o tempo todo. Estou enfrentando isso apenas no iOS

@vajid-khan isso é meio estranho. Esse problema específico é baseado em solicitações de métodos POST com arquivos. Pode muito bem trabalhar alguma depuração, provavelmente cabeçalhos ou algo assim.

@dlogvin sim, confirmei com o carteiro. Com o carteiro, estou recebendo resposta todas as vezes, até o Android está funcionando o tempo todo. Estou enfrentando isso apenas no iOS

@vajid-khan isso é meio estranho. Esse problema específico é baseado em solicitações de métodos POST com arquivos. Pode muito bem trabalhar alguma depuração, provavelmente cabeçalhos ou algo assim.

Confirmo o problema dele, também o enfrentei em "ios" depois de atualizar o Flipper para 0.54.0 como @safaiyeh mencionado no PR!


Editar:
Quando abro o xCode e envio a solicitação, posso ver isso nos logs

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

Então eu consegui isso depois de pesquisar # https://github.com/facebook/react-native/commit/31980094107ed37f8de70972dbcc319cc9a26339
E substituindo-o como eles disseram,
a solicitação de postagem funciona em alguns casos!
No meu aplicativo eu envio uma imagem no post request, se eu escolher uma imagem do _default no simulador,_ a solicitação não obteve nenhuma resposta _'não funciona como antes'_ mas o problema acima desapareceu,
Então eu não sei o que está acontecendo!
Se alguém puder aqui para testar este caso em seu dispositivo físico e nos avise!

@mathrocha12100 muito obrigado, sua resposta resolve meu problema

Mesmo problema, tentei tudo o que foi dito aqui! Ainda não funciona!

Tente isso

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

Tente isso

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

Esta não é a questão. Outros formulários no meu aplicativo funcionam, exceto um específico. Este não é um problema de caminho.

Tente isso

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

Esta não é a questão. Outros formulários no meu aplicativo funcionam, exceto um específico. Este não é um problema de caminho.

Sim, outro método de postagem funcionará, exceto upload de arquivo, porque está relacionado ao Flipper. Altere a versão do Flipper para 0.58 e execute gradlew clean na pasta android. Para mim, depois disso, apenas mudar para content:// funciona para mim, caso contrário, dá Network err.

@safaiyeh Alguma atualização sobre isso?
Quero liberar meu App :(

Quem ainda está lutando com este problema. está acontecendo por causa do plugin de rede Flipper.
Eu desabilitei e as coisas funcionam muito bem.

Minha solução para fazer isso funcionar é comentar a linha 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);

neste arquivo android/app/src/debug/java/com/**/ReactNativeFlipper.java

Ainda um problema em reagir nativo 0,63. Esta solução funcionou para mim.

Mesmo problema, tentei tudo o que foi dito aqui! Ainda não funciona!
O primeiro passo de @mathrocha12100 corrigiu meu problema!
android/app/src/main/java/com/{yourProject}/MainApplication.java comment -> initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

Mesmo problema aqui!

Primeira tentativa de corrigir o problema:

atualize o Flipper para 0.46.0 (não funcionou)
atualize o Flipper para 0.52.0 (não funcionou)
comente na linha 43 do ReactNativeFlipper.java (não funcionou)
exclua a pasta debug em android/app/src/debug (não funcionou)

Versões instaladas no meu projeto:

"reagir": "16.13.1",
"react-native": "0.63.2",
"axios": "^ 0.20.0",

Precisamos de uma solução urgente

Mesmo problema aqui!

Primeira tentativa de corrigir o problema:

atualize o Flipper para 0.46.0 (não funcionou)
atualize o Flipper para 0.52.0 (não funcionou)
comente na linha 43 do ReactNativeFlipper.java (não funcionou)
exclua a pasta debug em android/app/src/debug (não funcionou)

Versões instaladas no meu projeto:

"reagir": "16.13.1",
"react-native": "0.63.2",
"axios": "^ 0.20.0",

Precisamos de uma solução urgente

Eu concordo absolutamente com isso... precisamos de uma solução PERMANENTE urgente. Isso está atrasando meu projeto, ou seja, está me afetando muito. Está ficando muito chato, a espera está ficando cada vez mais longa. Quando sai a atualização?

Obrigado a todos pela paciência! A correção foi lançada com 0.63.3, certifique-se de reverter qualquer trabalho feito e atualize corretamente!

Certifique-se de limpar sua compilação gradle também.

Se ocorrerem novos problemas, crie um novo problema 🎉🤟😁

Obrigado a todos pela paciência! A correção foi lançada com 0.63.3, certifique-se de reverter qualquer trabalho feito e atualize corretamente!

Certifique-se de limpar sua compilação gradle também.

Se ocorrerem novos problemas, crie um novo problema 🎉🤟😁

Atualizado, continua com o mesmo problema. Devemos alterar o gradle.properties? o meu indica FLIPPER_VERSION=0.33.1

Atualização: alterei a versão do Flipper para: 0.54.0 , ainda não funciona.

pessoas que não seguiram nenhum tipo de correção fornecida acima e que atualizaram, por favor, confirme se isso não é um problema que estou enfrentando. Isso não corrigiu o problema. @murilokrugner ??

@dlogvin Eu reverti as modificações e atualizei para a versão 63.3, mas ainda não funcionou, temos que atualizar o Flipper para alguma versão?

No meu projeto o Flipper está na versão: 0.37.0

Então a atualização não funcionou.

@safaiyeh

A atualização não funcionou.

É uma questão simples, basta um upload e não funciona. Vamos abrir um novo problema

É uma questão simples, basta um upload e não funciona. Vamos abrir um novo problema

É uma questão simples que é URGENTE para corrigir. Muitos aplicativos são afetados por isso, o upload de arquivos é obrigatório para muitos serviços.

Devemos abrir uma nova questão.

Você pode usar isso para o diff completo https://react-native-community.github.io/upgrade-helper/

Você pode usar isso para o diff completo https://react-native-community.github.io/upgrade-helper/

Já fiz uso disso, nada ajudou.

Talvez seja uma pergunta estúpida: "D
Mas como você atualiza para a última versão 0.63.3?
usando helper e copy-paste dif?

Talvez seja uma pergunta estúpida: "D
Mas como você atualiza para a última versão 0.63.3?
usando helper e copy-paste dif?

npx react-native upgrade tente, mas tenho 99,99% de certeza que a "correção" não funcionará.

Atualizei meu projeto de 63.2 para 63.3 e Flipper de 0.37.0 para 0.54.0

Mas ainda não está funcionando

Estou fazendo algo errado?

Após a atualização para 0.63.3

Eu tenho alguns problemas estranhos no iOS quando escolho uma imagem da imagem do sistema de arquivos e envio a solicitação não funciona! mas quando eu baixo uma imagem aleatória e tento novamente, funciona muito bem !! "Simulador 13.3"

Android funciona muito bem ;)

Portanto, o problema ainda não foi resolvido.

Os uploads de arquivos não são uma coisa nesta nova versão.

Por favor, reabra o problema @safaiyeh

Vamos abrir um novo problema. Com um repro mínimo com o mais recente reagir nativo.

Um para o problema do @anastely ios e

@dlogvin problema do Android.

Por favor, me marque no assunto.

Todas as soluções que encontrei na internet, até agora nenhuma funcionou.

Estou enfrentando esse problema desde a versão 0.62 do React Native.

Eu tinha um projeto em que precisava fazer upload de arquivos mas o prazo era curto, então a alternativa era converter o arquivo para uma String Base64 e enviar para o backend.

No entanto, corrigir esse problema é extremamente urgente.

Todas as soluções que encontrei na internet, até agora nenhuma funcionou.

Estou enfrentando esse problema desde a versão 0.62 do React Native.

Eu tinha um projeto em que precisava fazer upload de arquivos mas o prazo era curto, então a alternativa era converter o arquivo para uma String Base64 e enviar para o backend.

No entanto, corrigir esse problema é extremamente urgente.

Concordo, este é um problema crítico e afeta TODOS os aplicativos que fazem uso de uploads de arquivos.

@safaiyeh sim, vou abrir um problema. Farei quando chegar em casa.

Gente, eu não vou comprar. Funcionou!

Solução que funcionou para mim: atualizei o React Native para 0.63.3 e o Flipper para 0.54.0, mas ainda não estava funcionando.

Reiniciei o emulador do Android e o abri novamente. e funcionou!!

Obrigado a todos!

Gente, eu não vou comprar. Funcionou!

Solução que funcionou para mim: atualizei o React Native para 0.63.3 e o Flipper para 0.54.0, mas ainda não estava funcionando.

Reiniciei o emulador do Android e o abri novamente. e funcionou!!

Obrigado a todos!

Interessante, coisa é... eu construí o app para lançamento... testado em dispositivo físico, mesma coisa. Tentei usar o apk debug, mesmo erro "erro de rede".

Ainda não resolvido. Abrirá questão em breve.

Gente, eu não vou comprar. Funcionou!

Solução que funcionou para mim: atualizei o React Native para 0.63.3 e o Flipper para 0.54.0, mas ainda não estava funcionando.

Reiniciei o emulador do Android e o abri novamente. e funcionou!!

Obrigado a todos!

Por favor, tente executar em dispositivo físico na depuração e versão de compilação, por favor

Gente, eu não vou comprar. Funcionou!
Solução que funcionou para mim: atualizei o React Native para 0.63.3 e o Flipper para 0.54.0, mas ainda não estava funcionando.
Reiniciei o emulador do Android e o abri novamente. e funcionou!!
Obrigado a todos!

Por favor, tente executar em dispositivo físico na depuração e versão de compilação, por favor

@dlogvin Também funciona em um dispositivo físico, acredito que seja algo em cache

Gente, eu não vou comprar. Funcionou!
Solução que funcionou para mim: atualizei o React Native para 0.63.3 e o Flipper para 0.54.0, mas ainda não estava funcionando.
Reiniciei o emulador do Android e o abri novamente. e funcionou!!
Obrigado a todos!

Por favor, tente executar em dispositivo físico na depuração e versão de compilação, por favor

@dlogvin Também funciona em um dispositivo físico, acredito que seja algo em cache

Estou feliz que tenha resolvido para você, mas do meu lado ... eu até tentei uma compilação limpa, ainda sem sorte ...

Se alguém ainda estiver enfrentando problemas no RN Versão 0.62 ou superior, a solução é:
Você deve fornecer uri, nome e tipo da mídia que está enviando.

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

Em seguida, vá para a linha número 43 e comente esta linha:
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
em android/app/src/debug/java/com/"nome do projeto"/ReactNativeFlipper.java

Passei cerca de 8 horas cavando a solução para o erro.

Depois de tentar todos os hacks discutidos acima, este foi o que salvou meu dia. Muito obrigado!

atualizar para 0.63.3 funcionou para mim finalmente

no meu caso, anteriormente este código de formulário de upload está funcionando bem:

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

então eu instalei algumas outras dependências e então ele retorna o erro de rede.
então eu tive que mudar o tipo com um prefixo explícito:

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

A RN 63.3 corrigiu esse problema. Funciona!

atualizar para 63.3 resolvido para mim também

Não..

O RN 63.3 funciona basicamente porque sua versão flipper usa 0.54.0.
Se o RN 63.3 ainda não funcionar, devemos verificar
andróide:
FLIPPER_VERSION no arquivo android/gradle.properties
iOS:
pod install --repo-update

Estou usando o RN 0.63.3 e atualizei o FLIPPER_VERSION para 0.54.0 mas ainda não está funcionando. Alguma outra solução disponível?

fiz isso, não é por causa da versão flipper, estou usando react -native 0.62.2 e flipper version: 0.33.1, comentou a linha 43 em android/app/src/debug/java/com/maxyride/app/ drivers/ReactNativeFlipper.java e certifique-se de que o tipo de upload foi especificado corretamente,

Devemos usar essas ferramentas para atualizar para RN 63.3. Certifique-se de que cada mesclagem esteja correta.
https://react-native-community.github.io/upgrade-helper/

RESOLVIDO!
Altere a versão do react navite no package.json:
"react-native": "0.63.3"
No ANDROID:
android/gradle.properties
Alterar a versão do Flipper:
FLIPPER_VERSION=0.54.0
Depois disso, desinstale o aplicativo no dispositivo e execute o projeto novamente. :)
Etapas do IOS:
https://react-native-community.github.io/upgrade-helper/ (basta selecionar a versão mais recente do RN ou usar 0.63.3)

Talvez isso salve alguém. Ocorreu um erro semelhante (não faça upload de arquivos!!!) com qualquer solicitação de rede. No meu caso, o problema estava no certificado ssl do meu servidor https. O prazo do certificado expirou, e essa foi a causa do erro.

RN: 0,61,5

Eu tentei tudo sugerido neste tópico e procurei sugestões em todos os lugares e nada. Finalmente, percebi o problema. Talvez ajude outra pessoa.

Na verdade, foi minha culpa... Eu estava chamando o selecionador de imagem em um componente filho. O usuário escolheu as imagens. Clicou em salvar, o que os retornou ao componente anterior. Eles preencheriam um formulário e as imagens seriam carregadas após o preenchimento do formulário.

O problema foi que, no componente filho, chamei ImagePicker.clear() . Estava um pouco amassado e por isso não o vi imediatamente. Eu recebi o mesmo "erro de rede não foi possível ler o arquivo para uri" que todos os outros obtiveram, então acho que para o meu caso específico, estava muito enganado pensando que havia algum outro problema acontecendo.

Acho que o bom é que acabei atualizando minha versão nativa do react, flipper e Gradle para o último. Então existe isso. Por outro lado, perdi 3 dias para isso. A programação é estranha.

Se alguém ainda estiver enfrentando problemas no RN Versão 0.62 ou superior, a solução é:
Você deve fornecer uri, nome e tipo da mídia que está enviando.

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

Em seguida, vá para a linha número 43 e comente esta linha:
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
em android/app/src/debug/java/com/"nome do projeto"/ReactNativeFlipper.java
Passei cerca de 8 horas cavando a solução para o erro.

Depois de tentar todos os hacks discutidos acima, este foi o que salvou meu dia. Muito obrigado!

Não funcione

Foi mal orientado por algum post na internet que afirmava que a parte file:// no caminho para o Android deveria ser removida antes de configurá-la para o URI para os dados do formulário. Usando o caminho como está e removendo o builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); como mencionado acima, funcionou para mim para reagir a versão 0.62.2 para Android e ios

ainda tenho o problema, usando RN 0.63.3 flipper 0.54.0, fazendo upload de fotos bem, mas ao fazer upload de vídeo tem erro de rede, mal usando outro método como @murilokrugner disse, pois meu prazo também é curto

ainda tenho o problema, usando RN 0.63.3 flipper 0.54.0, fazendo upload de fotos bem, mas ao fazer upload de vídeo tem erro de rede, mal usando outro método como @murilokrugner disse, pois meu prazo também é curto

para vocês, se ainda tiverem esse problema, tenho soluções simples:

  1. instale o rn-fetch-blob siga suas instruções https://github.com/joltup/rn-fetch-blob
  2. então siga esta instrução https://github.com/joltup/rn-fetch-blob#multipartform -data-example-post-form-data-with-file-and-data

o meu esta funcionando bem

@abumostafa você é uma lenda. Muito obrigado.

Qualquer um que ainda esteja enfrentando esse problema com o 0.63.3 e o flipper mais recente - altere a busca para XMLHttpRequest. Funciona perfeitamente bem.

Ainda enfrentando o mesmo problema usando :
RN 0.63.3
nadadeira 0,54,0

Eu comentei a linha 43 em android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

Ainda o mesmo problema, tentei quase tudo não funcionando.

Para compartilhar minha solução é decodificar com camera em base64 e depois enviar no servidor nesse formato. Estou totalmente desapontado como em 2020 alguns recursos minúsculos e simples que são promovidos pelos desenvolvedores simplesmente não funcionam por... anos.

TLDR: Qualquer pessoa com problemas para enviar um arquivo, tente converter para base64 e enviá-lo.

Esta página foi útil?
0 / 5 - 0 avaliações