React-native: Bereaksi Asli 0.62.* [TypeError: Permintaan jaringan gagal] saat mengunggah file

Dibuat pada 6 Apr 2020  ·  263Komentar  ·  Sumber: facebook/react-native

Harap berikan semua informasi yang diminta. Masalah yang tidak mengikuti format ini kemungkinan besar akan terhenti.

Keterangan

Setelah memutakhirkan dari 0.61.4 ke 0.62.0, aplikasi tidak akan mengunggah file lagi dari Android (semua permintaan lainnya berfungsi dengan baik)

Bereaksi versi Asli:

0.62.0

Langkah-Langkah Untuk Mereproduksi

  1. Instal aplikasi ReactNative baru melalui CLI
  2. Unggah file ke emulator
  3. Coba unggah file menggunakan 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/>
  }
}

Hasil yang diharapkan

Permintaan harus mencapai server untuk mengunggah file

Camilan, contoh kode, tangkapan layar, atau tautan ke repositori:

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

Komentar yang paling membantu

Siapa pun yang masih berjuang dengan masalah ini. itu terjadi karena plugin jaringan Flipper.
Saya menonaktifkannya dan semuanya berfungsi dengan baik.

Solusi saya untuk membuat ini berfungsi adalah mengomentari nomor baris 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);

dalam file ini android/app/src/debug/java/com/**/ReactNativeFlipper.java

Semua 263 komentar

Masalah yang sama disini!

Permasalahan yang sama !! Saya terjebak pada masalah ini dari 2 hari terakhir! Hampir semuanya dicari..

Anda perlu menambahkan uesCleartextTraffic="true" ini ke file AndroidManifest.xml yang ditemukan di dalam direktori _android/app/src/main/AndroidManifest.xml_

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

Menurut dokumen

Saat atribut disetel ke "false", komponen platform (misalnya, tumpukan HTTP dan FTP, DownloadManager, dan MediaPlayer) akan menolak permintaan aplikasi untuk menggunakan lalu lintas teks jelas. Perpustakaan pihak ketiga sangat dianjurkan untuk menghormati pengaturan ini juga. Alasan utama untuk menghindari lalu lintas cleartext adalah kurangnya kerahasiaan, keaslian, dan perlindungan terhadap gangguan; penyerang jaringan dapat menguping data yang dikirimkan dan juga memodifikasinya tanpa terdeteksi.

Anda perlu menambahkan uesCleartextTraffic ="true" ini ke file AndroidManifest,xml yang ditemukan di dalam direktori Android/app/src/main

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

Menurut dokumen

Saat atribut disetel ke "false", komponen platform (misalnya, tumpukan HTTP dan FTP, DownloadManager, dan MediaPlayer) akan menolak permintaan aplikasi untuk menggunakan lalu lintas teks jelas. Perpustakaan pihak ketiga sangat dianjurkan untuk menghormati pengaturan ini juga. Alasan utama untuk menghindari lalu lintas cleartext adalah kurangnya kerahasiaan, keaslian, dan perlindungan terhadap gangguan; penyerang jaringan dapat menguping data yang dikirimkan dan juga memodifikasinya tanpa terdeteksi.

Saya sudah mencobanya. Ini digunakan ketika Anda membuat permintaan ke server http, tetapi server saya berjalan di https. Itu berjalan dengan sempurna sebelum memutakhirkan ke 0,62.
Sesuatu yang salah.

Semua permintaan lainnya bekerja dengan sempurna. Hanya unggahan file yang tidak berfungsi lagi.

Semua permintaan lainnya bekerja dengan sempurna. Hanya unggahan file yang tidak berfungsi lagi.

Saya menghadapi terlalu banyak masalah ketika saya mencoba memutakhirkan ke 0,62 meskipun saya membuat aplikasi baru dan memindahkan kode saya ke dalamnya. Saya memutar kembali ke 0,61.5 sampai stabil :/

Saya menghadapi masalah yang sama, karena RN 0.62.0 dan 0.62.1 menampilkan kesalahan ini: Network request filed .
Semua permintaan berfungsi kecuali untuk posting gambar

Saya pindah kembali ke 0.61.5 :( Tidak ada pilihan lain yang tersisa untuk saat ini. Jika ada yang membutuhkan bantuan dalam menurunkan versi ke 0.61.5, lihat react-native-upgrade-helper.

Hal yang sama terjadi di sini!

Saya menghadapi masalah yang sama, itu terjadi di Android, tetapi berfungsi dengan baik di iOS.
Saya kira masalah ini tentang Flipper Network.

Untuk sementara, saya berkomentar
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

dalam file ini
/android/app/src/main/java/com/{your_project}/MainApplication.java

Masalah ini juga terjadi di pihak saya, dan coba tebak apa yang hanya terjadi dalam mode debug. Mencoba membangun di internalRelease dan berfungsi dengan baik. Saya kira itu karena reload otomatis/cepat dalam mode debug yang menerapkan beberapa komunikasi sirip yang tampaknya terkait dalam masalah ini ..

Masalah lain di sini adalah tidak ada kesalahan di logcat android.. Saya juga menghabiskan beberapa hari meneliti cara memperbaiki masalah ini masih belum berhasil.

Siapa pun yang masih berjuang dengan masalah ini. itu terjadi karena plugin jaringan Flipper.
Saya menonaktifkannya dan semuanya berfungsi dengan baik.

Solusi saya untuk membuat ini berfungsi adalah mengomentari nomor baris 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);

dalam file ini android/app/src/debug/java/com/**/ReactNativeFlipper.java

Terima kasih atas masalah ini @abumostafa. Apakah ini terjadi pada template React Native yang baru di luar kotak? Jika demikian ini harus dilihat jika tidak, jangan ragu untuk menutupnya.

:peringatan:Contoh yang Dapat Direproduksi Tidak Ada
:sumber informasi:Sepertinya masalah Anda tidak memiliki contoh yang dapat direproduksi. Harap berikan Camilan atau repositori yang menunjukkan masalah yang Anda laporkan dengan cara yang minimal, lengkap, dan dapat direproduksi .
:peringatan:Menggunakan Versi Lama
:sumber informasi:Sepertinya Anda menggunakan React Native versi lama. Harap tingkatkan ke versi terbaru, dan verifikasi jika masalah tetap ada. Jika tidak, beri tahu kami agar kami dapat menyelesaikan masalah ini. Ini membantu kami memastikan bahwa kami melihat masalah yang masih ada dalam rilis saat ini.

Terima kasih atas masalah ini @abumostafa. Apakah ini terjadi pada template React Native yang baru di luar kotak? Jika demikian ini harus dilihat jika tidak, jangan ragu untuk menutupnya.

Ini masih terjadi di template React Native terbaru 0.62.1

Terima kasih atas masalah ini @abumostafa. Apakah ini terjadi pada template React Native yang baru di luar kotak? Jika demikian ini harus dilihat jika tidak, jangan ragu untuk menutupnya.

Ini masih terjadi di template React Native terbaru 0.62.1

@safaiyeh
Saya bisa mengkonfirmasi. Itu masih terjadi di template asli reaksi segar terbaru 0.62.1

Siapa pun yang masih berjuang dengan masalah ini. itu terjadi karena plugin jaringan Flipper.
Saya menonaktifkannya dan semuanya berfungsi dengan baik.

Solusi saya untuk membuat ini berfungsi adalah mengomentari nomor baris 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);

dalam file ini android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

Masih terjadi di 0.62.2, dan ini memperbaiki sementara masalah di Android

@abumostafa

*Coba ini *

coba implementasikan "rn-fetch-blob"

````
impor RNFetchBlob dari "rn-fetch-blob";

RNFetchBlob.fetch('POST',, {
Terima: 'aplikasi/json',
'Content-Type': 'multipart/form-data',}, [
{ nama: 'profileimage', nama file: this.state.filePath.fileName, data: RNFetchBlob.wrap(this.state.filePath.uri) },
{ nama: 'uid', data: uidy },
{ nama: 'dob', data: this.state.fDOB},
{ nama: 'nomor telepon', data: this.state.pnumber},
{ nama: 'alamat', data: this.state.address},
{ nama: 'gender', data: this.state.isgender},
{ nama: 'nama pengguna', data: this.state.fulname}
// jenis konten khusus
]).lalu((res) => {
console.log(res)
ResponseHelper.success('Diperbarui');
this.setState({isstarting:false})
})
.catch((err) => {
this.setState({isstarting:false})
ResponseHelper.success('Masalah server silakan coba lagi');
console.log('err', kesalahan);
})
````

ini akan menyelesaikan masalah Anda

RNFetchBlob.wrap

Terima kasih. Saya punya pertanyaan. Apakah fungsi ini RNFetchBlob.wrap mengonversi file menjadi base64 ?

Siapa pun yang masih berjuang dengan masalah ini. itu terjadi karena plugin jaringan Flipper.
Saya menonaktifkannya dan semuanya berfungsi dengan baik.

Solusi saya untuk membuat ini berfungsi adalah mengomentari nomor baris 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);

dalam file ini android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

Terima kasih @abumostafa Solusi solusi ini menghemat banyak waktu saya. Sudah saya menghabiskan banyak waktu untuk kesalahan pengunggahan file, lalu saya mendapatkan masalah Anda. Omong-omong Apakah Anda tahu masalah sudah diperbaiki atau tidak?

Saya melakukan ping ke tim Flipper, pekerjaan untuk ini akan dilacak di sini: https://github.com/facebook/flipper/issues/993

Saya mencoba dua solusi yang diajukan oleh @abumostafa dan @alfianwahid; saya coba downgrade ke 0.61.5; Saya mencoba mengimplementasikan dengan fetch (saya menggunakan aksioma); tidak ada yang berhasil. Saya menggunakan versi 0.62.1

Saya mencoba dua solusi yang diajukan oleh @abumostafa dan @alfianwahid; saya coba downgrade ke 0.61.5; Saya mencoba mengimplementasikan dengan fetch (saya menggunakan aksioma); tidak ada yang berhasil. Saya menggunakan versi 0.62.1

apakah Anda mencoba membangun kembali aplikasi setelah perubahan ??

@abumostafa Saya tidak tahu apakah saya melakukannya dengan benar. Tapi saya menghapus folder node_modules , yarn.lock , menjalankan perintah ./gradlew clean dan ./gradlew cleanBuildCache dan menjalankan npx react-native run-android lagi.

Saya mengalami masalah yang sama saat ini di RN 0.61.4 dan axios 0.19.2. Juga mencoba berkomentar initializeFlipper(this); cleanBuildCache dan masih mendapatkan Network Error .

buka folder android dan cari file ReactNativeFlipper.java dan
komentar nomor baris 43
// builder.addNetworkInterceptor(FlipperOkhttpInterceptor baru(networkFlipperPlugin));

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

Dalam kasus saya, saya tidak memiliki file itu di proyek saya

Dalam kasus saya, saya tidak memiliki file itu di proyek saya
apakah kamu memiliki folder android?
jika Anda memiliki pencarian di dalam folder aplikasi

RNFetchBlob.wrap

Terima kasih. Saya punya pertanyaan. Apakah fungsi ini RNFetchBlob.wrap mengonversi file menjadi base64 ?

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

Sama di sini, misalnya mencoba fetch("https://www.mocky.io/v2/5185415ba171ea3a00704eed") memunculkan TypeError: Network request failed .
Itu hanya terjadi di Android, baik dalam debug dan rilis, dan keduanya dengan debugging jarak jauh dan tanpa.
Menambahkan android:usesCleartextTraffic="true" tidak membantu (tetapi ini untuk permintaan non-SSL).
Menggunakan RN 0.62.2.

Sunting: mengambil https://jsonplaceholder.typicode.com/todos/1 berfungsi! Bagaimana beberapa situs bisa bekerja dan yang lainnya tidak?!

Pembaruan, setelah melakukan beberapa tes , kami sampai pada kesimpulan bahwa itu karena sertifikat SSL yang gagal. Kami tidak tahu apa yang salah dengan ini, tetapi masalah juga terjadi di Postman dengan opsi "Verifikasi sertifikat SSL" diaktifkan. Mungkinkah otoritas sertifikat tidak ada dalam daftar telepon?

Baru saja menghabiskan hari terakhir berjuang dengan masalah ini. Mengawali jalur absolut saya dengan "file: //" sehingga Anda mengakhiri dengan tiga / menyelesaikan masalah untuk saya.

Contoh jalan:

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

Contoh kode saya:

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

Saya menggunakan react-native@^0.62.2

Apakah perbaikannya telah dirilis? Bagaimana cara kami memperbarui?

Masih mendapatkannya di 0.62.2, apakah ada pembaruan tentang ini?

Siapa pun yang masih berjuang dengan masalah ini. itu terjadi karena plugin jaringan Flipper.
Saya menonaktifkannya dan semuanya berfungsi dengan baik.
Solusi saya untuk membuat ini berfungsi adalah mengomentari nomor baris 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);

dalam file ini android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

Masih terjadi di 0.62.2, dan ini memperbaiki sementara masalah di Android

Ini memperbaikinya untuk saat ini.

Siapa pun yang masih berjuang dengan masalah ini. itu terjadi karena plugin jaringan Flipper.
Saya menonaktifkannya dan semuanya berfungsi dengan baik.

Solusi saya untuk membuat ini berfungsi adalah mengomentari nomor baris 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);

dalam file ini android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

ini membuat hari saya! bekerja dengan baik dengan RN 0.62.0. Terima kasih!

Flipper telah menerbitkan pembaruan, silakan periksa komentar terbaru https://github.com/facebook/flipper/issues/993#issuecomment -619823916 Akankah react-native menerbitkan pembaruan untuk mencerminkan perbaikan ini?

Masih mendapatkan Network request failed dengan Flipper baru 0.39.0 ketika mencoba fetch("https://www.mocky.io/v2/5185415ba171ea3a00704eed") , meskipun berfungsi di Chrome/Firefox/Safari.

@antoinerousseau Anda mungkin ingin mengatakannya di sana... Saya belum mengujinya.

@aprilmintacpineda Saya memposting di https://github.com/facebook/react-native/issues/26939 sebagai gantinya, tampaknya lebih terkait, dan saya tidak yakin apakah itu terkait Flipper?

Masalah ini diselesaikan dengan memutakhirkan Flipper di file ini

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

saya mendapat masalah yang sama dengan reaksi 0.61.4

Terima kasih @alfianwahid
Memecahkan masalah saya.

bisakah kita menutup tiket ini?

Membantu saya juga

@abumostafa , Terima kasih bro, itu menyelamatkan pencarian 48 jam saya

bisakah kita menutup tiket ini?

Saya bingung. Mengapa Anda ingin menutup masalah ini jika Anda hanya menemukan solusi dan masalah tidak diperbaiki?

Hai semuanya, saya juga mencoba dengan axios dan mengambil tetapi tidak ada yang berhasil, saya juga mencoba mengomentari baris Flipper dan memutakhirkannya tetapi juga tidak berpengaruh. Jika kalian masih mengalami masalah dengan ini, lebih baik coba lakukan permintaan POST Anda dengan XMLHttpRequest itu berhasil untuk saya.
Semoga membantu.

Masalah ini juga terjadi di pihak saya, dan coba tebak apa yang hanya terjadi dalam mode debug. Mencoba membangun di internalRelease dan berfungsi dengan baik. Saya kira itu karena reload otomatis/cepat dalam mode debug yang menerapkan beberapa komunikasi sirip yang tampaknya terkait dalam masalah ini ..

Masalah lain di sini adalah tidak ada kesalahan di logcat android.. Saya juga menghabiskan beberapa hari meneliti cara memperbaiki masalah ini masih belum berhasil.

Bagaimana Anda menyelesaikannya? @trglairnarra

Saya menghadapi masalah yang sama, karena RN 0.62.0 dan 0.62.1 menampilkan kesalahan ini: Network request filed .
Semua permintaan berfungsi kecuali untuk posting gambar

Sama disini. Bagaimana Anda menyelesaikannya? Aplikasi saya berjalan dengan baik dalam mode rilis tetapi tidak dalam mode build

Siapa pun yang masih berjuang dengan masalah ini. itu terjadi karena plugin jaringan Flipper.
Saya menonaktifkannya dan semuanya berfungsi dengan baik.

Solusi saya untuk membuat ini berfungsi adalah mengomentari nomor baris 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);

dalam file ini android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

Anda menyelamatkan hari saya. Terima kasih banyak :) Tetapi apakah aman untuk melakukannya untuk pembangunan di masa mendatang?

Hai, saya masih mendapatkan masalah di 62.2.
Solusi dicoba

  1. android:usesCleartextTraffic="true" => Bahkan semua API saya yang lain berfungsi, saya juga memiliki HTTP.
  2. mengomentari nomor baris 43
  3. tidak ada masalah dengan "file://", => bahkan tanpa menambahkan gambar, kami hanya menambahkan json formdata masih mendapatkan kesalahan yang sama.

Hai, saya masih mendapatkan masalah di 62.2.
Solusi dicoba

  1. android:usesCleartextTraffic="true" => Bahkan semua API saya yang lain berfungsi, saya juga memiliki HTTP.
  2. mengomentari nomor baris 43
  3. tidak ada masalah dengan "file://", => bahkan tanpa menambahkan gambar, kami hanya menambahkan json formdata masih mendapatkan kesalahan yang sama.

@jamisonrachford coba lakukan permintaan Anda dengan XMLHttpRequest

Masalah ini diselesaikan dengan memutakhirkan Flipper di file ini

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

Melihat :
facebook/flipper#993 (komentar)

membuat FLIPPER_VERSION=0.41.0 secara manual alih-alih menggunakan FLIPPER_VERSION=0.33.1 default dengan RN 0.62.2 menyebabkan build gagal (gambar terlampir). Apakah saya melewatkan satu langkah dalam meningkatkan versi sirip?
gradle issues

Saya menggunakan pameran. Bagaimana saya bisa memecahkan masalah ini?

Masalah ini diselesaikan dengan memutakhirkan Flipper di file ini

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

Melihat :
facebook/flipper#993 (komentar)

Terima kasih banyak!

Masalah ini diselesaikan dengan memutakhirkan Flipper di file ini

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

Melihat :
facebook/flipper#993 (komentar)
Terima kasih!
Masalah ini mengganggu saya selama dua hari

Saya menggunakan klien expo, harus ada solusi untuk itu? Saya mencari berhari-hari dan tidak berhasil, adakah yang bisa membantu saya bagaimana kita bisa mencapai ini di expo?

@ Hiti3 Saya juga menggunakan pameran. Saya juga sedang mencari solusi. Apa yang saya lakukan sekarang adalah mengirim string base64 (tanpa formData) dan mendekodekannya di sisi server:

pameran
`impor * sebagai ImagePicker dari 'expo-image-picker';

// Pemilih gambar
ekspor default async () => {
izin const = menunggu ImagePicker.requestCameraRollPermissionsAsync();
if (permission.granted === 'false') return 'denied';
const options = { allowEditing: true, base64: true };
const hasil = ImagePicker.launchImageLibraryAsync(opsi);
kembali hasil;
};
`

Sisi server
`
const tajam = membutuhkan('tajam');
export.uploadImage = async (req, res, next) => {
const { gambar } = req.body;
konstan {
jenis: jenis gambar,
nama: gambarNama,
base64: imageBase64,
jalur: imagePath,
mengubah ukuran,
} = gambar;

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

var img = Penyangga baru(base64Data, 'base64');
jalur const = __dirname + ./../../public/${imagePath}/${imageName} ;

jika (mengubah ukuran) {
mencoba {
menunggu tajam (img)
.resize(500, 500)
.toFormat('jpeg')
.jpeg({ kualitas: 90 })
.toFile(jalur);
} tangkap (keliru) {
console.log('tulis erro', err);
}
}
jika (! mengubah ukuran) {
mencoba {
menunggu sharp(img).toFormat('jpeg').jpeg({ kualitas: 90 }).toFile(path);
} tangkap (keliru) {
console.log('tulis erro', err);
}
}
req.image = { imageType, imageName, imagePath };
Berikutnya();
};
`

Membantu itu membantu. Jika Anda memiliki masalah, silakan kirim saya pesan.

Terima kasih atas solusi yang diberikan, ini berfungsi saat diuji, saya hanya ingin
pastikan lagi sebelum saya melompat kapal dan kehilangan satu hari mungkin. Dan Anda
mengupload video atau gambar jika saya mengerti dengan benar?

Pada Selasa, 19 Mei 2020, 21:44 Gustavo Leite Silvano, [email protected]
menulis:

@Hiti3 https://github.com/Hiti3 Saya juga menggunakan expo. saya juga sedang
mencari solusi. Apa yang saya lakukan sekarang adalah mengirim string base64 (tidak
formData) dan mendekodekannya di sisi server:

pameran
`impor * sebagai ImagePicker dari 'expo-image-picker';

// Pemilih gambar
ekspor default async () => {
izin const = menunggu ImagePicker.requestCameraRollPermissionsAsync();
if (permission.granted === 'false') return 'denied';
const options = { allowEditing: true, base64: true };
const hasil = ImagePicker.launchImageLibraryAsync(opsi);
kembali hasil;
};
`

Sisi server
`
const tajam = membutuhkan('tajam');
export.uploadImage = async (req, res, next) => {
const { gambar } = req.body;
konstan {
jenis: jenis gambar,
nama: gambarNama,
base64: imageBase64,
jalur: imagePath,
mengubah ukuran,
} = gambar;

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

var img = Penyangga baru(base64Data, 'base64');
const path = __dirname + ./../../public/${imagePath}/${imageName};

jika (mengubah ukuran) {
mencoba {
menunggu tajam (img)
.resize(500, 500)
.toFormat('jpeg')
.jpeg({ kualitas: 90 })
.toFile(jalur);
} tangkap (keliru) {
console.log('tulis erro', err);
}
}
jika (! mengubah ukuran) {
mencoba {
menunggu sharp(img).toFormat('jpeg').jpeg({ kualitas: 90 }).toFile(path);
} tangkap (keliru) {
console.log('tulis erro', err);
}
}
req.image = { imageType, imageName, imagePath };
Berikutnya();
};
`

Membantu itu membantu. Jika Anda memiliki masalah, silakan kirim saya pesan.


Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/facebook/react-native/issues/28551#issuecomment-631041471 ,
atau berhenti berlangganan
https://github.com/notifications/unsubscribe-auth/ACGFH2MSYJ2J5YDRASXISOTRSLOQFANCNFSM4MCRHIRA
.

0.41.0

Terima kasih banyak.

Masalah ini diselesaikan dengan memutakhirkan Flipper di file ini
/yourproject/android/gradle.properties Baris 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

Melihat :
facebook/flipper#993 (komentar)

Terima kasih banyak!

@Hiti3 Hanya gambar. Tapi saya rasa Anda juga bisa mengupload video.

Terima kasih @alfianwahid
tapi saya menggunakan
FLIPPER_VERSION=0.44.0

saya dulu memiliki masalah yang sama, saya mencoba segala sesuatu dan dan terjebak pada ini selama 4-5 hari kemudian saya menggunakan paket RN-FETCH-BLOB itu benar-benar memecahkan masalah pengiriman file. menggunakannya Anda tidak akan pernah menyesal

Setelah menerapkan kedua perbaikan di atas, saya masih mendapatkan permintaan Jaringan gagal. Dalam kasus saya, file diperbarui di server tetapi memberikan kesalahan.

mungkin itu masalah cara Anda mengirim data

mungkin itu masalah cara Anda mengirim data

Saya sedang melihat ke dalamnya. Tetapi jika metode pengirimannya tidak benar lalu mengapa datanya diperbarui di server.

Saya telah mencoba setiap solusi tetapi tidak ada yang berhasil di Android. Saya menggunakan 0.62.2
Screen Shot 2020-05-31 at 6 40 53 PM

@tamangsuresh Hai teman, apakah Anda menemukan perbaikan untuk ini?

@Brianop bukan siapa-siapa

terima kasih mengatakan untuk memutakhirkan sirip, saya menyelesaikannya

Hei, apakah ada yang memecahkan masalah ini?, saya menghadapi masalah yang sama.

Hei, apakah ada yang memecahkan masalah ini? , Saya juga menghadapi masalah yang sama.
Anda perlu meningkatkan sirip ke yang terbaru

@liyuewen saya punya upgrade sirip di proyek RN dan sirip juga. Tapi tidak ada keberhasilan.

@liyuewen Saya juga memiliki pembaruan sirip dan sirip di proyek RN. Tapi tanpa keberhasilan apapun.

Setelah memutakhirkan, Anda perlu menghapus cache Android

@liyuewen saya juga sudah melakukannya. Tapi tidak ada keberuntungan.

Masalah ini diselesaikan dengan memutakhirkan Flipper di file ini

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

Melihat :
facebook/flipper#993 (komentar)
Dalam proyek saya, versi sirip tersedia di lokasi ini D:myProjectnode_modulesreact-nativetemplateandroidgradle.properties. Saya telah memperbarui sirip di gradle di lokasi ini dan gradle.properties lainnya yang terletak di /myProject/Android/gradle.properties. Juga data diperbarui di server dan saya telah mengujinya di Postman juga berfungsi dengan baik di Postman. Saya juga telah mengomentari kode yang diceritakan oleh @abumostafa

@liyuewen saya juga melakukannya. Tapi tanpa keberuntungan.

Versi saya adalah "bereaksi asli": "^ 0.62.2", yang berhasil di masa depan

Memperbarui Flipper ke 0,45, selesaikan masalahnya

Saya tidak menggunakan Flipper di mana pun, masih mengalami masalah yang sama :(

Saya tidak menggunakan Flipper di mana pun, masih mengalami masalah yang sama :(

Sama di sini, menggunakan Expo.. Ini seharusnya tidak menjadi masalah bagi banyak orang, terutama ketika menggunakan ruang kerja terkelola di mana fitur tersebut disajikan secara ambigu sebagai fungsi kerja.

Siapa pun memiliki pembaruan tentang masalah ini. Saya telah mencoba memutakhirkan sirip, mengomentari sirip di mainactivity. Masih mengalami masalah ini di android.
Mengembalikan [TypeError: permintaan jaringan gagal].
Tetapi kode yang sama berfungsi dengan baik di iOS

Siapa pun memiliki pembaruan tentang masalah ini. Saya telah mencoba memutakhirkan sirip, mengomentari sirip di mainactivity. Masih mengalami masalah ini di android.
Mengembalikan [TypeError: permintaan jaringan gagal].
Tetapi kode yang sama berfungsi dengan baik di iOS

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

Menghapus baris ini di MainApplication.java berfungsi. Masalah masih ada di debug build. tetapi berfungsi dalam rilis build.

Siapa pun memiliki pembaruan tentang masalah ini. Saya telah mencoba memutakhirkan sirip, mengomentari sirip di mainactivity. Masih mengalami masalah ini di android.
Mengembalikan [TypeError: permintaan jaringan gagal].
Tetapi kode yang sama berfungsi dengan baik di iOS

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

Menghapus baris ini di MainApplication.java berfungsi. Masalah masih ada di debug build. tetapi berfungsi dalam rilis build.

Terima kasih, saya tidak pernah mencoba menguji di build rilis. Saya akan mencobanya hari ini.

Saya memiliki reaksi asli v59. Jadi, apa yang bisa dilakukan orang yang tidak menggunakan Flipper? Apakah ada pembaruan?

Inilah semua data relevan yang dapat saya pikirkan dari aplikasi saya. Saya mengalami masalah yang sama, di simulator iOS.

RN 0.62.2, Flipper 0.46.0, pada aplikasi Expo yang dikeluarkan.

  // 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: Permintaan jaringan gagal
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@[kode asli]

Info.plist diatur untuk mengizinkan permintaan localhost.

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

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

Dan Podfile saya:

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

Saya memiliki reaksi asli v59. Jadi, apa yang bisa dilakukan orang yang tidak menggunakan Flipper? Apakah ada pembaruan?

Saya tidak memiliki masalah ini di versi sebelumnya. Masalah Anda mungkin sesuatu yang berbeda menurut saya. Apakah Anda menggunakan url https?

Saya memiliki reaksi asli v59. Jadi, apa yang bisa dilakukan orang yang tidak menggunakan Flipper? Apakah ada pembaruan?

Saya tidak memiliki masalah ini di versi sebelumnya. Masalah Anda mungkin sesuatu yang berbeda menurut saya. Apakah Anda menggunakan url https?

Ya, https.
Apakah ada batasan untuk objek formData di RN, misalnya, bisa berupa panjang string atau ukuran formData? Sepertinya RN mencegat permintaan ini dan melemparkan kesalahan ini

Saya memiliki reaksi asli v59. Jadi, apa yang bisa dilakukan orang yang tidak menggunakan Flipper? Apakah ada pembaruan?

Saya tidak memiliki masalah ini di versi sebelumnya. Masalah Anda mungkin sesuatu yang berbeda menurut saya. Apakah Anda menggunakan url https?

Ya, https.
Apakah ada batasan untuk objek formData di RN, misalnya, bisa berupa panjang string atau ukuran formData? Sepertinya RN mencegat permintaan ini dan melemparkan kesalahan ini

Saya tidak mengetahui adanya batasan seperti itu. Bisakah Anda membagikan kodenya? Dan apakah ini berhasil di iOS?

Saya perlu mencapai struktur badan permintaan seperti itu:

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

di mana file adalah objek file JS dengan bidang name , type , uri , size , dll.

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

Saya memiliki masalah yang sama dalam proyek saya dengan versi asli-reaksi 0.62.
Saya memperbarui sirip ke "0.41.0" dan berhasil.
Di gradle.properities
FLIPPER_VERSION=0.41.0

Saya memiliki masalah yang sama dalam proyek saya dengan versi asli-reaksi 0.62.
Saya memperbarui sirip ke "0.41.0" dan berhasil.
Di gradle.properities
FLIPPER_VERSION=0.41.0

Bisakah Anda menyebutkan jalur gradle.properties, gradle.properties di android tidak mengandung versi sirip. Tetapi gradle.properties di folder reaksi Android memiliki versi sirip.

@nharis7 ada di /android/gradle.properties
Annotation 2020-06-12 210640
Tapi apa versi reaksi-asli Anda? sirip hanya dalam versi asli-reaksi 0.62 ke atas. Tidak ada sirip di versi lama.

@nharis7 ada di /android/gradle.properties
Annotation 2020-06-12 210640
Tapi apa versi reaksi-asli Anda? sirip hanya dalam versi asli-reaksi 0.62 ke atas. Tidak ada sirip di versi lama.

Saat ini saya menggunakan 0.62.2 dan saya telah memutakhirkan proyek saya dari 0,61 di /Android/gradle.properties saya. Saya telah membuat proyek baru dengannya sekarang saya dapat melihat versi sirip di /Android/gradle.properties. Saya akan memigrasikan semua barang saya ke proyek baru dan akan melihat apakah masalah ini terpecahkan atau tidak.

SOLUSI INI BEKERJA UNTUK SAYA
https://github.com/axios/axios/issues/1567#issuecomment -518118223

Memutakhirkan sirip memperbaikinya! (saya upgrade ke 0.46.0)

Saya mencoba semua cara di atas!
hanya upgrade sirip ke 0,46 yang bisa memperbaikinya!

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

Masalah ini diselesaikan dengan memutakhirkan Flipper di file ini

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

Melihat :
facebook/flipper#993 (komentar)

Ini bekerja cukup baik, yang memecahkan masalah di android, terima kasih banyak.

Saya menghadapi masalah yang sama, itu terjadi di Android tetapi berfungsi dengan baik di iOS.
Saya pikir pertanyaan ini tentang Jaringan Flipper.

Untuk saat ini, saya berkomentar
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

dalam file ini
/android/app/src/main/java/com/{your_project}/MainApplication.java

Itu berhasil untuk saya :)

Saya menghadapi masalah yang sama, itu terjadi di Android, tetapi berfungsi dengan baik di iOS.
Saya kira masalah ini tentang Flipper Network.

Untuk sementara, saya berkomentar
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

dalam file ini
/android/app/src/main/java/com/{your_project}/MainApplication.java

saya menguji dengan ini maka saya dapat mengunggah file

terima kasih @alfianwahid

Mengupgrade sirip ke 0.46.0 memperbaikinya!

Di dalam
android\gradle.properties

Masalah ini membutuhkan waktu lebih dari 5 jam untuk saya selesaikan. Saya hampir menyerah ketika saya akhirnya bisa menyelesaikan masalah ini.

Masalah yang saya hadapi yang dekat dengan apa yang Anda sebutkan adalah bahwa saya mendapatkan NetworkError saat menggunakan expo-image-picker dan mencoba mengunggah file menggunakan axios . Itu berfungsi dengan baik di iOS tetapi tidak berfungsi di Android.

Ini adalah bagaimana saya memecahkan masalah.

Ada dua isu independen yang beraksi di sini. Katakanlah kita mendapatkan imageUri dari image-picker, lalu kita akan menggunakan baris kode berikut ini untuk mengunggah dari frontend.

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

Masalah pertama adalah dengan imageUri itu sendiri. Jika misalkan jalur foto adalah /user/.../path/to/file.jpg . Kemudian file picker di Android akan memberikan nilai imageUri sebagai file:/user/.../path/to/file.jpg sedangkan file picker di iOS akan memberikan nilai imageUri sebagai file:///user/.../path/to/file.jpg .

Solusi untuk masalah pertama adalah menggunakan file:// alih-alih file: di formData di Android.

Masalah kedua adalah kita tidak menggunakan tipe mime yang tepat. Ini berfungsi dengan baik di iOS tetapi tidak di Android. Apa yang membuat ini lebih buruk adalah bahwa paket file-picker memberikan tipe file sebagai "gambar" dan tidak memberikan tipe mime yang tepat.

Solusinya adalah dengan menggunakan tipe mime yang tepat di formData di bidang type . Contoh: tipe mime untuk file .jpg akan menjadi image/jpeg dan untuk .png file akan menjadi image/png . Kita tidak perlu melakukan ini secara manual. Sebagai gantinya, Anda dapat menggunakan paket npm yang sangat terkenal bernama mime .

Solusi kerja terakhir adalah:

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

Saya harap ini membantu menyelesaikan masalah Anda. :)

Ketika Anda mendapatkan kesalahan jaringan dengan formData, Anda harus memeriksa kebenaran formData. Ini sangat penting.

android/gradle.properties
tingkatkan Fliper
FLIPPER_VERSION=0.41.0

Orang-orang yang masih menghadapi masalah mereka dapat melakukan seperti ini

biarkan data = new FormData();

data.append('tindakan', 'TAMBAHKAN');
data.append('param', 0);
data.append('param kedua', 0);
data.append('file', Blob baru([payload], { ketik: 'teks/csv' }));

// ini bekerja
biarkan permintaan = new XMLHttpRequest();
request.open('POST', url);
permintaan.kirim(data);

itu akan berhasil (:+1: (:100:

Sepertinya banyak orang telah dapat mengatasi ini dengan memperbarui versi sirip mereka. yang bagus. Tetapi juga banyak orang mengalami rasa sakit untuk menemukan masalah ini dan tidak diblokir.

Jadi pertanyaan: Apa yang membuatnya lebih mudah untuk menemukan ini? Masalah yang dipasangi pin? Apakah masalah yang tertutup (karena sepertinya ini diselesaikan?) masih dapat ditemukan? Tautan Stack Overflow? Sepertinya ini telah diselesaikan, tetapi kami tidak ingin orang-orang terus membuang waktu untuk mencari solusi yang diketahui.

Ini harus ditutup segera setelah pemutakhiran mendarat - https://github.com/facebook/react-native/pull/29033 . Sampai itu terjadi, kami mungkin mempertimbangkan untuk memasangnya.

Saya masih memiliki masalah yang sama setelah memperbarui versi sirip ke 0.46.0

Saya sendiri juga mengalami masalah yang sama. Seseorang tolong bantu kami

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

Saya tidak salah apa yang saya lakukan, dapatkah seseorang membantu saya memperbaikinya ??

Jika saya memperbarui FLIPPER_VERSION=0.41.0 aplikasi itu sendiri bahkan tidak terbuka.

Mungkin ini bisa membantu seseorang yang masih mengalami masalah dengan ini.
Apakah Anda menggunakan kebijakan WAF (Web Application Firewall) dari Microsoft? Jika begitu; mereka memiliki bug (atau React Native, tidak yakin siapa yang harus disalahkan dengan tepat) yang memblokir permintaan dengan yang serupa Tapi hanya kadang-kadang, dan hanya di iOS. Batas bentuk multi bagian yang dihasilkan pada level terendah di RN terkadang berisi karakter (mungkin . ) yang diblokir oleh kebijakan.

Ini membutuhkan waktu berhari-hari bagi kita untuk mencari tahu. Microsoft mengakuinya. Kami menonaktifkan kebijakan WAF terkait untuk mengatasi masalah tersebut. Ini tidak terjadi di PostMan misalnya. Itu menghasilkan batas yang berbeda dari yang dilakukan RN.

Memutakhirkan sirip ke 0.44.0 Dan React-native 0.63.0 , saya masih memiliki masalah yang sama

Saya memperbaikinya dengan mengomentari satu baris di
/android/app/src/debug/java/com/{nama-aplikasi-anda}/ReactNativeFlipper.java
mengajukan.
ini hanya perbaikan yang berhasil untuk saya!

NetworkingModule.CustomClientBuilder() baru {
@Mengesampingkan
berlaku kekosongan publik (pembangun OkHttpClient.Builder) {
// builder.addNetworkInterceptor(FlipperOkhttpInterceptor baru(networkFlipperPlugin));
}
});

Jika Anda mencoba semuanya di atas dan tidak ada yang membantu Anda, dan Anda menggunakan pemilih gambar dan data formulir, coba tambahkan ini di opsi pemilih gambar:
``` js
biarkan opsi = {
judul: 'Pilih Gambar',
noData: benar,
lebar maks: 500,
tinggi maks: 500,
};
ImagePicker.showImagePicker(opsi, respons => {
.
.

Form data should look like this then:

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

Saya menghadapi masalah yang sama, itu terjadi di Android, tetapi berfungsi dengan baik di iOS.
Saya kira masalah ini tentang Flipper Network.

Untuk sementara, saya berkomentar
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

dalam file ini
/android/app/src/main/java/com/{your_project}/MainApplication.java

Saya memiliki masalah yang sama dalam proyek saya dengan versi asli-reaksi 0.62.
Saya memperbarui sirip ke "0.41.0" dan berhasil.
Di gradle.properities
FLIPPER_VERSION=0.41.0

Kedua hal ini bekerja untuk saya. Tapi hanya menggunakan satu solusi. Terima kasih keduanya. @alfianwahid @dmobisoft
Pikirkan FLIPPER_VERSION=0.41.0 solusi yang lebih baik.

Apakah ada orang dari pengembang asli React yang mengetahui masalah yang menggetarkan ini, karena siapa pun dengan RUANG KERJA TERKELOLA (mis. Expo) tidak dapat menerapkan "solusi" yang diusulkan dengan peretasan RN Flipper.. Adakah solusi yang diusulkan dari pihak Anda untuk ruang kerja terkelola seperti Expo?

Hai @ Hiti3 Saya sarankan membuat masalah pada repositori Expo di sini: https://github.com/expo/expo , karena solusi di sini tidak akan berlaku untuk ruang kerja yang dikelola.

cc @brentvatne

@ Hiti3 - ini tidak memengaruhi aplikasi pameran terkelola karena sirip tidak terintegrasi di dalamnya. jika Anda melihat kesalahan ini karena alasan lain selain yang disebutkan dalam masalah ini, dan tindakan terbaik Anda jika Anda tidak dapat menemukan solusi adalah dengan membuat mcve dan mempostingnya ke https://github.com/ expo/expo/isu

Bagi saya juga tidak berfungsi memberikan kesalahan [TypeError: Permintaan jaringan gagal]

KODE :

const username = this.state.values.username;
const nama belakang = 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');
                    }
                };

Bagi saya juga tidak berfungsi memberikan kesalahan [TypeError: Permintaan jaringan gagal]

KODE :

const username = this.state.values.username;
const nama belakang = 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');
                    }
                };

Anda memberikan alamat IP sebagai URL string adalah pemeriksaan yang salah sekali lagi.

ketika saya memposting tanpa file (gambar) saya akan berfungsi dengan baik, ketika saya mengirim dengan file gambar waktu itu menunjukkan kesalahan [TypeError: Permintaan jaringan gagal]; jangan khawatir tentang URL

Saya memperbaikinya dengan mengomentari satu baris di
/android/app/src/debug/java/com/{nama-aplikasi-anda}/ReactNativeFlipper.java
mengajukan.
ini hanya perbaikan yang berhasil untuk saya!

NetworkingModule.CustomClientBuilder() baru {
@mengesampingkan
berlaku kekosongan publik (pembangun OkHttpClient.Builder) {
// builder.addNetworkInterceptor(FlipperOkhttpInterceptor baru(networkFlipperPlugin));
}
});

Coba yang ini berhasil untuk saya

Saya juga memiliki masalah yang sama. Saya menggunakan hack untuk ini https://github.com/facebook/react-native/issues/29021#issuecomment -662196480.

Jika Anda memiliki versi sirip 0.37.0, benturkan ke 0.41.0, Ini berhasil pada milik saya.

Saya menghadapi masalah yang sama, itu terjadi di Android, tetapi berfungsi dengan baik di iOS.
Saya kira masalah ini tentang Flipper Network.

Untuk sementara, saya berkomentar
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

dalam file ini
/android/app/src/main/java/com/{your_project}/MainApplication.java

Terima kasih banyak itu bekerja dengan sempurna di proyek saya.
Saya hanya ingin tahu bagaimana Anda bisa mengetahui bahwa penginisialisasi Flipper adalah penyebab bug?

@alfianwahid

Hanya untuk berbagi. Untuk android, Anda dapat mencoba meningkatkan versi sirip ke 0,41, maka itu akan berfungsi dengan baik. Tetapi untuk IOS, saya masih menghadapi masalah yang sama bahkan versi flipper iOS adalah 0.41.5. Jadi untuk IOS, saya secara manual memperbarui node_modules/react-native/Libraries/Network/RCTNetworkTask.mm dan sekarang berfungsi di IOS.

tolong bisakah Anda memberi tahu saya cara meningkatkan sirip FLIPPER_VERSION=0.33.1 ke 0.41

@sureshhallyali , Anda dapat memperbarui FLIPPER_VERSION=0.41.0 di file android/gradle.properties. Setelah itu bersihkan build android dan jalankan kembali android.

Hanya untuk berbagi, saya menggunakan Flipper 0.50 di Ubuntu saya dan memperbarui android/gradle.properties ke FLIPPER_VERSION=0.50.0 juga berfungsi dengan baik.

Saya telah mencoba semua solusi di atas (dari memutakhirkan sirip hingga mengomentari hingga menghapus folder debug dan semuanya), dan tidak ada yang berhasil untuk saya, saya masih mendapatkan network error meskipun gambar disimpan di server. react-native 0.62.2 , saya telah mencoba selama 2 hari sekarang, ini benar-benar membuat frustrasi ...

ini kode saya

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

Kirim (singkatnya)

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

Apakah masalah ini telah diperbaiki di 0.63.1 ?

MEMPERBARUI:
Upgrade ke 0.63.2 masih, masalah tetap ada

Hanya untuk berbagi, saya menggunakan Flipper 0.50 di Ubuntu saya dan memperbarui android/gradle.properties ke FLIPPER_VERSION=0.50.0 juga berfungsi dengan baik.

@vinifraga , bagaimana Anda meningkatkan versi Flipper di IOS? Saya tahu cara memutakhirkan di Android tetapi tidak yakin bagaimana cara memutakhirkan dari ios/podfile di sana?

Hai teman-teman coba rn-fetch-blob ini berhasil untuk saya
saya menggunakan Axios untuk mengunggah gambar tetapi tidak berfungsi untuk Android jadi setelah banyak pencarian saya menemukan paket ini dan berhasil

Link di sini untuk paket

Mencoba semuanya (yang lain lib juga rn-fetch-upload, rn-background-upload, ...), unggahan gambar tidak berfungsi di iOS dan tidak masalah di Android. Mengunggah di S3 menggunakan URL yang telah ditandatangani sebelumnya selalu mengembalikan ini kepada saya (berfungsi dengan baik di RN -v 0.59.x, dan tidak lagi di RN -v 0.61.x:
````
"
EntityTooLarge
Unggahan yang Anda usulkan melebihi ukuran maksimum yang diizinkan
2025220
2023115
{...}
5n+{...}
"

@MayoudP coba rn-fetch-blob mungkin ini akan berhasil

Terima kasih @abumostafa

Saya mencoba semua solusi ini tetapi tidak berhasil
1: perlu menambahkan
uesCleartextTraffic="true" ke file AndroidManifest.xml yang ditemukan di dalam direktori android/app/src/main/AndroidManifest.xml
untuk menangani http dan https

2: perlu komentar
// initializeFlipper(ini, getReactNativeHost().getReactInstanceManager());
dalam file ini /android/app/src/main/java/com/{your_project}/MainApplication.java
3: perlu komentar
// builder.addNetworkInterceptor(FlipperOkhttpInterceptor baru(networkFlipperPlugin));
int filenya Android/app/src/debug/Java/com/{your_project}/ReactNativeFlipper.java
4: seseorang memberi tahu peningkatan reaksi asli ke 63.2 yang juga selesai
5: peningkatan versi FLIPPER ke 50.0

perlu mencoba sekarang satu: rn-fetch-blob
https://github.com/facebook/react-native/issues/29493

3: perlu komentar
// builder.addNetworkInterceptor(FlipperOkhttpInterceptor baru(networkFlipperPlugin));

akhirnya berhasil di android

Menggunakan rn-fetch-blob untuk panggilan API di mana data formulir diperlukan berfungsi (iOS dikonfirmasi, belum yakin tentang Android), saya baru saja mengganti panggilan pengambilan reguler saya di sana (lihat readme):

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

Apakah masalah ini benar-benar bertahan selama 4 bulan?

@MayoudP coba rn-fetch-blob mungkin ini akan berhasil

Tidak, tidak berhasil, tidak berhasil membuatnya berfungsi menggunakan URL yang telah ditandatangani sebelumnya dan S3...

Hanya untuk berbagi. Untuk android, Anda dapat mencoba meningkatkan versi sirip ke 0,41, maka itu akan berfungsi dengan baik. Tetapi untuk IOS, saya masih menghadapi masalah yang sama bahkan versi flipper iOS adalah 0.41.5. Jadi untuk IOS, saya secara manual memperbarui node_modules/react-native/Libraries/Network/RCTNetworkTask.mm dan sekarang berfungsi di IOS.

@anthony1110 Apa yang Anda perbarui di node_modules/react-native/Libraries/Network/RCTNetworkTask.mm ?

@MayoudP coba rn-fetch-blob mungkin ini akan berhasil

Tidak, tidak berhasil, tidak berhasil membuatnya berfungsi menggunakan URL yang telah ditandatangani sebelumnya dan S3...

Hanya RNFS yang berfungsi rn

@andrekovac , Anda dapat mengikuti utas ini dan mengikuti solusi iOS dan Android. https://github.com/facebook/react-native/issues/29021#issuecomment -664030881

Menerapkan tambalan @ anthony1110 yang disebutkan tidak berhasil untuk saya. Masih mendapatkan kesalahan jaringan.

Tetapi solusi (untuk React Native 0.63 ) tampaknya akan segera hadir: https://github.com/facebook/react-native/issues/29364#issuecomment -664526253

@andrekovac , jangan ikuti tambalan saya, yang itu diretas. Solusi buruk. Anda harus mengikuti pembaruan https://github.com/facebook/react-native/issues/29364#issuecomment -663005914 untuk masalah iOS.

Siapa pun yang masih berjuang dengan masalah ini. itu terjadi karena plugin jaringan Flipper.
Saya menonaktifkannya dan semuanya berfungsi dengan baik.

Solusi saya untuk membuat ini berfungsi adalah mengomentari nomor baris 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);

dalam file ini android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

saya mencoba ini dan bekerja 100%

Siapa pun yang masih berjuang dengan masalah ini. itu terjadi karena plugin jaringan Flipper.
Saya menonaktifkannya dan semuanya berfungsi dengan baik.

Solusi saya untuk membuat ini berfungsi adalah mengomentari nomor baris 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);

dalam file ini android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

Ini berfungsi (Y)

Bug ini akan membuatku gila
Semua solusi di atas tidak berfungsi

Hai @victor012888 telah mencoba rn-fetch-blob

Saya menggunakan unggahan FLIPPER_VERSION=0.50.0 cara akhirnya terpecahkan
Masalah saya adalah INSTALL_FAILED_INSUFFICIENT_STORAGE karena paket baru terlalu besar
Setelah menambahkan lebih banyak RAM untuk mesin vitual semuanya berfungsi

udah ane coba semua, masih bermasalah.
tidak hanya versi debug tetapi versi rilis.

Saya telah memecahkan masalah saya sekarang!
perbarui FLIPPER_VERSION=0.52.0 terbaru

kode formData seperti ini
biarkan formData = FormData baru();
this.state.pics.map((nilai,indeks) => {
console.log(nilai)
console.log(indeks)
let file = { uri:value.uri , ketik: 'multipart/form-data', name:value.uri.substr (value.uri.length-10,10)};
formData.append('file'+indeks,file)
})

ketik harus 'multipart/form-data' , sama dengan header postingan.


semoga bisa membantu seseorang

Saya menggunakan unggahan FLIPPER_VERSION=0.50.0 cara akhirnya terpecahkan
Masalah saya adalah INSTALL_FAILED_INSUFFICIENT_STORAGE karena paket baru terlalu besar
Setelah menambahkan lebih banyak RAM untuk mesin vitual semuanya berfungsi

cara memperbarui FLIPPER

Saya mengalami masalah ini, dimulai pada RN63+ dan saya tidak memiliki sirip. Flipper benar-benar dihapus.

Itu juga hanya terjadi untuk unggahan file dengan multipart/form-data , jenisnya ditentukan. Tetapi permintaan itu dilewati setiap kali di android.

Halo, saya menggunakan expo 38 dengan RN 0.62.2
Saya menggunakan alur kerja kosong, jadi saya bisa mengedit kode asli.
Saya memiliki masalah yang sama meskipun saya mencoba setiap perbaikan yang terdaftar:

  • Flipper yang diperbarui di gradle.properties menjadi 0,52.0
  • mengomentari baris initializeFlipper di MainApplication.java
  • Mencoba setiap konfigurasi yang mungkin untuk jenis parameter formData 'file'.

Kode saya terlihat seperti ini

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
}

Adakah ide tentang apa yang mungkin saya lewatkan?

Sayangnya, solusi yang disebutkan tentang mengomentari baris kode Flipper dan semacamnya tidak berhasil untuk saya.

Saya berhasil membuatnya bekerja dengan menggunakan rn-fetch-blob .

Di bawah ini adalah potongan kode yang menunjukkan bagaimana saya menggunakan perpustakaan itu untuk mengunggah file 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>),
    },
  ]
)

Saya menghadapi masalah yang sama, itu terjadi di Android, tetapi berfungsi dengan baik di iOS.
Saya kira masalah ini tentang Flipper Network.

Untuk sementara, saya berkomentar
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

dalam file ini
/android/app/src/main/java/com/{your_project}/MainApplication.java

Bro berfungsi dengan baik, Terima kasih 👍

Halo, saya menggunakan expo 38 dengan RN 0.62.2
Saya menggunakan alur kerja kosong, jadi saya bisa mengedit kode asli.
Saya memiliki masalah yang sama meskipun saya mencoba setiap perbaikan yang terdaftar:

  • Flipper yang diperbarui di gradle.properties menjadi 0,52.0
  • mengomentari baris initializeFlipper di MainApplication.java
  • Mencoba setiap konfigurasi yang mungkin untuk jenis parameter formData 'file'.

[...]

Ahhhh saya telah menemukan apa yang saya lewatkan!
Dalam kasus saya, saya memasukkan header yang salah ke panggilan pengambilan saya, karena copy paste lama >.<
saya menggunakan

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

padahal seharusnya:

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

Bagian yang sulit adalah bahwa:

  1. kesalahan ini berfungsi di iOS
  2. selalu seperti itu di Android selama berbulan-bulan tanpa kesulitan mengunggah file

Tampaknya sejak pembaruan terakhir RN, kesalahan seperti itu tidak ditoleransi lagi menggunakan Android.

Saya menghadapi masalah yang sama, itu terjadi di Android, tetapi berfungsi dengan baik di iOS.
Saya kira masalah ini tentang Flipper Network.

Untuk sementara, saya berkomentar
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

dalam file ini
/android/app/src/main/java/com/{your_project}/MainApplication.java

Saya mendapatkan stream closed ketika mencoba mengunggah ke S3 dengan XHR dan ini menyelesaikan masalah dan terima kasih 👍

Saya memutakhirkan Flipper ke versi 0.51.2 dan berhasil untuk saya.

Saya memutakhirkan Flipper ke versi 0.51.2 dan berhasil untuk saya.

Halo @omid-ebrahimi , bagaimana Anda meningkatkan versi Flipper?

Terima kasih

masalah yang sama 0.63.2

Saya memutakhirkan Flipper ke versi 0.51.2 dan berhasil untuk saya.

Halo @omid-ebrahimi , bagaimana Anda meningkatkan versi Flipper?

Terima kasih

Pergi ke android/gradle.properties dan tambahkan baris ini

FLIPPER_VERSION=0.52.1

Anda harus memiliki baris berikut di android/app/build.gradle Anda:

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

    // ...
}

Saya memutakhirkan Flipper ke versi 0.51.2 dan berhasil untuk saya.

Halo @omid-ebrahimi , bagaimana Anda meningkatkan versi Flipper?
Terima kasih

Pergi ke android/gradle.properties dan tambahkan baris ini

FLIPPER_VERSION=0.52.1

Anda harus memiliki baris berikut di android/app/build.gradle Anda:

dependencies {
    // ....

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

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

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

    // ...
}

@omid-ebrahimi memutakhirkan sirip juga menyelesaikan masalah terima kasih, Dan saya telah membuka masalah ini di StackOverflow dengan hadiah, harap kirimkan jawaban ini di sana dan saya dapat memberikan hadiah kepada Anda.

Saya memutakhirkan flipper ke versi 52.0
dan gunakan ambil dan itu berhasil untuk saya
Tetapi ketika menggunakan axios.post tidak berhasil
Dan ketika menggunakan aksio seperti
axios({ method:'post , data : file , url:'something ',............. })
itu bekerja dengan baik

Dan jangan atur tajuk
'Content-Type': 'multipart/form-data'
juga akan bekerja dengan baik

Siapa pun yang masih berjuang dengan masalah ini. itu terjadi karena plugin jaringan Flipper.
Saya menonaktifkannya dan semuanya berfungsi dengan baik.

Solusi saya untuk membuat ini berfungsi adalah mengomentari nomor baris 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);

dalam file ini android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

@abumostafa Solusi yang Anda berikan efektif, tetapi masih tidak berfungsi untuk file yang dimulai dengan "file:///".
Misalnya:

  • Ini dapat bekerja: formData.append('files', {uri:'https://xxx.jpg', type:'image/jpeg', name:'test.jpeg' })
  • Ini tidak berfungsi: formData.append('files', {uri:'file:///xxx.jpg', type:'image/jpeg', name:'test.jpeg' })

Versi asli reaksi saya:

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

masalah yang sama mencoba memutakhirkan sirip tetapi tidak berfungsi.

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

Bagaimana dengan iOS?

Memiliki masalah ini di iOS juga. Mencoba mengubah versi Flipper dari 0.33.1 menjadi 0.50.0 dan lebih tinggi di Podfile saya. Ini terjadi pada saya pada

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

Saran @abumostafa membuatnya berfungsi untuk Android tetapi masih belum bisa membuatnya berfungsi di iOS.

EDIT: Ditingkatkan ke react-native: 0.63.2 masih masalah yang sama.

Mengubah versi Flipper tidak berhasil untuk saya. Saya mencoba mengomentari baris yang mungkin membantu tetapi juga menghadapi masalah yang sama. Solusi saya adalah menggunakan WebView dan injectJavascript untuk melakukan unggahan. Peretasan ini bekerja dengan baik untuk saya.

Solusi saya menggunakan <WebView> dan menyuntikkan javascript.. Ketika saya ingin mengunggah file baru, saya akan meneruskan parameter yang relevan ke pembuat fungsi string generateUploadCodes() dan itu akan menghasilkan string yang akan disuntikkan ke tampilan web.

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

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

Dengan itu saya hanya bisa menelepon

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

Untuk mendapatkan respon dari upload, kita dapat menggunakan webview.ReactNativeWebView.postMessage('our response'); . Kemudian proses respons melalui penangan onMessage WebView.

Sebelum semua itu, kita buat dulu ref dan komponen WebView kita seperti ini

  const webview = useRef(null);

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

Menyatukan semua perbaikan di sini, semoga kami bisa segera mendapatkan perbaikan untuk ini digabungkan ke inti:

iOS: Kembalikan PR, memerlukan modifikasi node_modules: https://github.com/facebook/react-native/issues/29364#issuecomment -671565181, PR dikirimkan di sini untuk perbaikan: https://github.com/facebook/react -asli/tarik/29595

Android: Tingkatkan versi Flipper https://github.com/facebook/react-native/issues/28551#issuecomment -674351386, PR dinaikkan https://github.com/facebook/react-native/pull/29787

Jika ada yang masih menghadapi masalah di RN Versi 0.62 atau lebih tinggi, solusinya adalah:
Anda harus memberikan uri, nama & jenis media yang Anda unggah.

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

Lalu pergi ke Baris nomor 43 dan beri komentar pada baris ini:
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
di android/app/src/debug/java/com/"nama proyek"/ReactNativeFlipper.java

Saya telah menghabiskan hampir 8 jam untuk menggali solusi untuk kesalahan tersebut.

Jika ada yang masih menghadapi masalah di RN Versi 0.62 atau lebih tinggi, solusinya adalah:
Anda harus memberikan uri, nama & jenis media yang Anda unggah.

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

Lalu pergi ke Baris nomor 43 dan beri komentar pada baris ini:
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
di android/app/src/debug/java/com/"nama proyek"/ReactNativeFlipper.java

Saya telah menghabiskan hampir 8 jam untuk menggali solusi untuk kesalahan tersebut.

Ya, itu juga yang terjadi pada saya, mengonfirmasinya di sini: https://github.com/facebook/react-native/issues/29364#issuecomment -679370449

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

Menyatukan semua perbaikan di sini, semoga kami bisa segera mendapatkan perbaikan untuk ini digabungkan ke inti:

iOS: Kembalikan PR, memerlukan modifikasi node_modules: https://github.com/facebook/react-native/issues/29364#issuecomment -671565181, PR dikirimkan di sini untuk perbaikan: https://github.com/facebook/react -asli/tarik/29595

Android: Tingkatkan versi Flipper https://github.com/facebook/react-native/issues/28551#issuecomment -674351386, PR dinaikkan https://github.com/facebook/react-native/pull/29787

Saya mengalami masalah yang sama dan tidak ada solusi di sini yang berhasil untuk saya.

Apa yang berhasil adalah saya hanya kehilangan mime_type dari unggahan saya.

Pastikan Anda memiliki data ini dengan benar:

  • uri
  • nama
  • Tipe

Bekerja dengan memutakhirkan sirip ke FLIPPER_VERSION=0.52.1 .

Ubah file ini - android/gradle.properties dan jalankan yarn android .

fetch

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

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

package.json

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

Apakah ada solusi untuk ini menggunakan Expo?

ada yang memecahkan masalah ini? sudah mencoba setiap metode seperti mengomentari beberapa perintah sirip, memutakhirkan sirip di gradle.properties, bahkan saya menurunkan RN saya dari 0,63 ke 0,62 masih mendapatkan kesalahan ini. Sudah terjebak pada kesalahan ini selama 2 hari. Ketika saya mencoba memposting data tanpa file ke API saya, itu berfungsi dengan baik, tetapi ketika saya mencoba mengunggah file seperti gambar ke API saya, saya mendapatkan kesalahan ini

@safaiyeh masih tidak berhasil untuk saya pak, saya sudah mencoba semuanya.

Jika ada yang masih menghadapi masalah di RN Versi 0.62 atau lebih tinggi, solusinya adalah:
Anda harus memberikan uri, nama & jenis media yang Anda unggah.

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

Lalu pergi ke Baris nomor 43 dan beri komentar pada baris ini:
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
di android/app/src/debug/java/com/"nama proyek"/ReactNativeFlipper.java

Saya telah menghabiskan hampir 8 jam untuk menggali solusi untuk kesalahan tersebut.

saya melakukan hal yang sama, tetapi masih menghadapi masalah yang sama. saya menggunakan
"bereaksi": "16.13.1",
"react-asli": "0.63.1",

@sadhruva Saya memiliki lingkungan yang sama seperti Anda dan ini memecahkan masalah bagi saya

Saya mengalami masalah yang sama. Jenis kesalahan ini membuat frustrasi karena tidak banyak yang dapat kami lakukan selain menunggu rilis tetap.

Saya sudah mencoba:

  • Mengomentari baris pada file java

  • Mengubah versi sirip saya

  • Menulis kode dengan 2 cara berbeda

Dan itu masih tidak berhasil. Yang aneh adalah bahwa formulir TIDAK berfungsi di bagian lain aplikasi saya, tetapi pada layar tertentu itu tidak berfungsi (hanya di Android, karena di iPhone berfungsi seperti yang diharapkan).

Jadi, sepertinya satu-satunya hal yang bisa saya lakukan saat ini adalah melanjutkan pengembangan hanya untuk iOS dan menunda rilis Android.

Hidup adalah hidup... Kurasa.

Saya mengalami masalah yang sama. Jenis kesalahan ini membuat frustrasi karena tidak banyak yang dapat kami lakukan selain menunggu rilis tetap.

Saya sudah mencoba:

  • Mengomentari baris pada file java
  • Mengubah versi sirip saya
  • Menulis kode dengan 2 cara berbeda

Dan itu masih tidak berhasil. Yang aneh adalah bahwa formulir TIDAK berfungsi di bagian lain aplikasi saya, tetapi pada layar tertentu itu tidak berfungsi (hanya di Android, karena di iPhone berfungsi seperti yang diharapkan).

Jadi, sepertinya satu-satunya hal yang bisa saya lakukan saat ini adalah melanjutkan pengembangan hanya untuk iOS dan menunda rilis Android.

Hidup adalah hidup... Kurasa.

Mengalami masalah yang sama. Namun aneh bahwa fungsi yang sama berfungsi dengan baik dengan reaksi, jadi saya pergi untuk memeriksa paket jaringan dan menemukan bahwa paket permintaan jaringan webAPP reaksi saya berjalan dengan header tipe konten: multipart/form-data , sementara RN cocok dengan content- type:application/form-data .
Jadi saya mengedit fungsi permintaan saya seperti ini:
await fetch(url, { method: 'POST', headers: { 'Content-Type': 'multipart/form-data', }, body: formData, })
Kemudian sertakan type&name di formData
let formData = new FormData(); formData.append('file', {uri: fileUri,type:fileType,name:fileName});
Tidak tahu mengapa, tetapi itu hanya bekerja secara ajaib.

saya menggunakan versi asli reaksi 0.63.2 dan mengikuti langkah-langkah ini untuk memperbaiki masalah
menggunakan react-native-cli

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

2 - dalam android/app/src/debug/java/com/{yourProject}/ReactNativeFlipper.java
komentar di baris 43 -> builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));

3 - dalam android/gradle.properties
ubah FLIPPER_VERSION=0.37.0 menjadi FLIPPER_VERSION=0.52.1

4 - dalam android/app/build.gradle
menimpa dependensi Flipper saat ini ke

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

    // ...
  }

dan setelah semua langkah ini -> npx react-native run-android atau yarn android

5 - dalam permintaan unggah posting saya

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

Semoga ini membantu

@mathrocha12100 bisakah Anda memformat komentar Anda dengan benar? Beberapa kode tampaknya tidak pada tempatnya, saya mungkin mencoba melakukannya langkah demi langkah.

Masalahnya adalah saya benar-benar tidak ingin mengacaukan konfigurasi untuk Android. Tapi bagaimanapun, tolong format jawaban Anda dengan benar untuk membantu semua orang yang mengalami masalah ini (termasuk saya).

Bersulang.

Masih tidak bekerja.

@dlogvin
Saya menghadapi masalah ini kemarin dan memperbaikinya seperti yang dikatakan @omid-ebrahimi [upgrade Flipper], plus komentari baris ini
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); di ReactNativeFlipper.java

Bersihkan folder Bangun [ios, android]
kemudian bangun lagi itu bekerja untuk saya dengan baik :)

@dlogvin
Saya menghadapi masalah ini kemarin dan memperbaikinya seperti yang dikatakan @omid-ebrahimi [upgrade Flipper], plus komentari baris ini
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); di ReactNativeFlipper.java

Bersihkan folder Bangun [ios, android]
kemudian bangun lagi itu bekerja untuk saya dengan baik :)

Bagaimana Anda benar-benar meningkatkan sirip?

sunting: Saya sudah mencoba mengganti versi FLIPPER dan mengomentari baris, tetapi tetap tidak ada. Sebenarnya, dalam versi debug aplikasi, gambar tidak dimuat setelah mengomentari baris. Ini benar-benar kacau...

@dlogvin di android/gradle.properties
ubah FLIPPER_VERSION=0.37.0 menjadi FLIPPER_VERSION=0.52.1

inilah reaksi dan versi reaksi asli jika Anda bertanya-tanya

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

@anastely saya melakukannya ... masih tidak ada :(

Saya menyerah...

@dlogvin Saya mencoba memuat gambar dari server dan itu dimuat, Jadi saya minta maaf :(

jika proyek Anda open source, saya dapat memeriksanya

Saya minta maaf, tetapi proyek ini bukan open source. Saya telah mencoba mengunggah file, formulir berfungsi di layar lain, tetapi di layar khusus ini tidak. Saya harus menunggu pembaruan RN, sementara saya hanya akan mengerjakan versi iPhone dan menyimpan versi Android di BETA.

bekerja untuk saya, saya mengubah versi sirip di file gradle.setting FLIPPER_VERSION=0.30.2 menjadi FLIPPER_VERSION=0.52.1 lalu bersihkan gradlew dan jalankan proyek.
dalam reaksi asli gunakan metode XMLHttpRequest.
ekspor biarkan dataWithImage = async (endPoint, params) => {
let token = menunggu AsyncStorage.getItem('token');
biarkan xhr = new XMLHttpRequest();
biarkan formData = FormData baru();
for (biarkan kunci dalam params) {
formData.append(kunci, params[kunci]);
}
xhr.withCredentials = benar;
xhr.addEventListener('readystatechange', fungsi () {
if (this.readyState === 4) {
console.log(this.responseText, '===> ini adalah respons');
}
});
xhr.open('POST', url + endPoint);
xhr.setRequestHeader('Otorisasi', 'Pembawa ' + token);
xhr.send(formData);
};

Saya menghadapi masalah serupa dengan permintaan POST melalui server saya (HTTPS), berfungsi dengan baik untuk iOS tetapi tidak di Android. Mencoba menonaktifkan sirip dan memutakhirkannya dan masih mengalami masalah yang sama. Mencoba dengan server lain, seperti (https://jsonplaceholder.typicode.com/) dan tampaknya berfungsi seperti yang diharapkan.

Deskripsi kesalahan tidak memberi tahu saya terlalu banyak "Kesalahan Jaringan", Sudah memeriksa izin Internet dan mengatur Android:usesCleartextTraffic= "true" pada manifes Android.

Masalah yang sama dengan pengambilan atau aksioma.

Untuk IOS di
file node_modules/react-native/Libraries/Image/RCTLLocalAssetImageLoader.mm

Ganti Di Bawah

  • -(RCTImageLoaderCancellationBlock)loadImageForURL:(NSURL *)imageURL
    ukuran: (CGSize) ukuran
    skala: (CGFloat) skala
    resizeMode:(RCTResizeMode)resizeMode
    progressHandler:(RCTImageLoaderProgressBlock)progressHandler
    partialLoadHandler:(RCTImageLoaderPartialLoadBlock)partialLoadHandler
    penyelesaianHandler:(RCTImageLoaderCompletionBlock)completionHandler
    {
    UIImage *gambar = RCTImageFromLocalAssetURL(imageURL);
    jika (gambar) {
    if (progressHandler) {
    progressHandler(1, 1);
    }
    penyelesaianHandler(nihil, gambar);
    } lain {
    NSString *message = [NSString stringWithFormat:@"Tidak dapat menemukan gambar %@", imageURL];
    RCTLogWarn(@"%@", pesan);
    penyelesaianHandler(RCTErrorWithMessage(pesan), nil);
    }

    kembali nihil;
    }

Dengan

  • -(RCTImageLoaderCancellationBlock)loadImageForURL:(NSURL *)imageURL
    ukuran: (CGSize) ukuran
    skala: (CGFloat) skala
    resizeMode:(RCTResizeMode)resizeMode
    progressHandler:(RCTImageLoaderProgressBlock)progressHandler
    partialLoadHandler:(RCTImageLoaderPartialLoadBlock)partialLoadHandler
    penyelesaianHandler:(RCTImageLoaderCompletionBlock)completionHandler
    {
    __block otomatis dibatalkan = std::make_shared<:atomic i="44">>(false);
    RCTExecuteOnMainQueue(^{
    if (dibatalkan->load()) {
    kembali;
    }

    UIImage *gambar = RCTImageFromLocalAssetURL(imageURL);
    jika (gambar) {
    if (progressHandler) {
    progressHandler(1, 1);
    }
    penyelesaianHandler(nihil, gambar);
    } lain {
    NSString *message = [NSString stringWithFormat:@"Tidak dapat menemukan gambar %@", imageURL];
    RCTLogWarn(@"%@", pesan);
    penyelesaianHandler(RCTErrorWithMessage(pesan), nil);
    }
    });

    kembali ^{
    dibatalkan->toko(benar);
    };
    }

Ini..

Suka dan Cinta, jika berhasil 👍

Hai semua perbaikan baru saja digabungkan ke master: https://github.com/facebook/react-native/commit/d8b70b19b39ead4dd41895d666d116a43c56474e

Ada juga perbaikan iOS yang sudah dilakukan ke master.

Saya telah memasukkan permintaan port kembali di sini: https://github.com/react-native-community/releases/issues/203#issuecomment -695052285, harapkan ini di 0.63.3 atau 0.64

@safaiyeh Saya senang sekarang dengan komentar yang Anda tambahkan ini. Saya berharap untuk mengembangkan tangan saya kembali untuk Android ASAP.

Bersulang.

Terima kasih banyak.

Yup, senang semua orang akan segera mendapatkan perbaikan ️ agak sibuk bagi saya juga mengejar orang yang tepat dan semacamnya. Semakin dekat!

Terima kasih, saya tunggu.
Untuk saat ini saya menggunakan solusi yang sama yang dibuat oleh @mathrocha12100.

Saya menghadapi masalah serupa di iOS. Tidak khusus untuk file tetapi di iOS panggilan api saya gagal secara acak, permintaan api yang sama akan berfungsi satu kali, waktu lain gagal dengan respons yang tidak ditentukan.
di android berfungsi dengan baik sepanjang waktu
Saya menggunakan axios 0.19.2, mencoba mengambil tetapi hasil yang sama
Bereaksi asli 0.62.2

@vajid-khan sudahkah Anda mengonfirmasi bahwa masalahnya ada di sisi depan Anda? Coba gunakan tukang pos atau Insomnia untuk memeriksa apakah itu backend Anda, kode asli reaksi Anda, atau apakah itu kerangka kerja itu sendiri. Saya sama sekali tidak mengalami masalah dengan permintaan API lain.

@dlogvin ya saya sudah konfirmasi dengan tukang pos. Dengan tukang pos saya mendapat tanggapan setiap saat, bahkan android bekerja sepanjang waktu. Saya menghadapi ini hanya di iOS

@dlogvin ya saya sudah konfirmasi dengan tukang pos. Dengan tukang pos saya mendapat tanggapan setiap saat, bahkan android bekerja sepanjang waktu. Saya menghadapi ini hanya di iOS

@vajid-khan itu agak aneh. Masalah khusus ini didasarkan pada permintaan metode POST dengan file. Mungkin juga melakukan beberapa debugging, mungkin header atau sesuatu seperti itu.

@dlogvin ya saya sudah konfirmasi dengan tukang pos. Dengan tukang pos saya mendapat tanggapan setiap saat, bahkan android bekerja sepanjang waktu. Saya menghadapi ini hanya di iOS

@vajid-khan itu agak aneh. Masalah khusus ini didasarkan pada permintaan metode POST dengan file. Mungkin juga melakukan beberapa debugging, mungkin header atau sesuatu seperti itu.

Saya mengkonfirmasi masalahnya, saya juga menghadapinya di "ios" setelah memutakhirkan Flipper ke 0,54.0 seperti yang disebutkan @safaiyeh di PR!


Sunting:
Ketika saya membuka xCode dan mengirim permintaan, saya dapat melihat ini di log

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

Jadi saya mendapatkan ini setelah mencari # https://github.com/facebook/react-native/commit/31980094107ed37f8de70972dbcc319cc9a26339
Dan menggantinya seperti yang mereka katakan,
permintaan posting berfungsi dalam beberapa kasus!
Di aplikasi saya, saya mengirim gambar dalam permintaan posting, jika saya memilih gambar dari _default di simulator,_ permintaan tidak mendapat respons apa pun _'tidak berfungsi seperti sebelumnya'_ tetapi masalah di atas hilang,
Jadi saya tidak tahu apa yang terjadi!
Jika ada yang bisa di sini untuk menguji kasus ini di perangkat fisiknya dan beri tahu kami!

@mathrocha12100 terima kasih banyak, jawaban Anda menyelesaikan masalah saya

Masalah yang sama, coba semua yang dikatakan di sini! Masih tidak bekerja!

Coba ini

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

Coba ini

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

Ini bukan masalahnya. Formulir lain di aplikasi saya berfungsi kecuali yang spesifik. Ini bukan masalah jalur.

Coba ini

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

Ini bukan masalahnya. Formulir lain di aplikasi saya berfungsi kecuali yang spesifik. Ini bukan masalah jalur.

Ya metode posting lain akan berfungsi kecuali Unggah file karena terkait dengan Flipper. Ubah versi Flipper menjadi 0,58 dan jalankan gradlew clean di folder android. Bagi saya, setelah ini, hanya mengubah ke content:// berfungsi untuk saya jika tidak memberikan Network err.

@safaiyeh Adakah pembaruan tentang ini?
Saya ingin merilis Aplikasi saya :(

Siapa pun yang masih berjuang dengan masalah ini. itu terjadi karena plugin jaringan Flipper.
Saya menonaktifkannya dan semuanya berfungsi dengan baik.

Solusi saya untuk membuat ini berfungsi adalah mengomentari nomor baris 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);

dalam file ini android/app/src/debug/java/com/**/ReactNativeFlipper.java

Masih menjadi masalah dalam reaksi asli 0.63. Solusi ini berhasil untuk saya.

Masalah yang sama, coba semua yang dikatakan di sini! Masih tidak bekerja!
@mathrocha12100 Langkah pertama memperbaiki masalah saya!
android/app/src/main/java/com/{yourProject}/MainApplication.java comment -> initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

Masalah yang sama disini!

Upaya pertama untuk memperbaiki masalah:

perbarui Flipper ke 0.46.0 (tidak berfungsi)
perbarui Flipper ke 0,52.0 (tidak berfungsi)
mengomentari baris 43 dari ReactNativeFlipper.java (tidak berfungsi)
hapus folder debug di android/app/src/debug (tidak berfungsi)

Versi yang diinstal di proyek saya:

"bereaksi": "16.13.1",
"react-asli": "0.63.2",
"aksios": "^ 0.20.0",

Kami membutuhkan solusi segera

Masalah yang sama disini!

Upaya pertama untuk memperbaiki masalah:

perbarui Flipper ke 0.46.0 (tidak berfungsi)
perbarui Flipper ke 0,52.0 (tidak berfungsi)
mengomentari baris 43 dari ReactNativeFlipper.java (tidak berfungsi)
hapus folder debug di android/app/src/debug (tidak berfungsi)

Versi yang diinstal di proyek saya:

"bereaksi": "16.13.1",
"react-asli": "0.63.2",
"aksios": "^ 0.20.0",

Kami membutuhkan solusi segera

Saya sangat setuju dengan ini... kita membutuhkan solusi PERMANEN yang mendesak. Ini menunda proyek saya, dengan kata lain, ini sangat mempengaruhi saya. Ini benar-benar menjengkelkan, penantian semakin lama. Kapan pembaruannya keluar?

Terima kasih semuanya atas kesabaran Anda! Perbaikan telah dirilis dengan 0.63.3, pastikan untuk mengembalikan pekerjaan apa pun yang Anda buat dan tingkatkan dengan benar!

Pastikan Anda juga membersihkan build gradle Anda.

Jika ada masalah baru, buat masalah baru 😁

Terima kasih semuanya atas kesabaran Anda! Perbaikan telah dirilis dengan 0.63.3, pastikan untuk mengembalikan pekerjaan apa pun yang Anda buat dan tingkatkan dengan benar!

Pastikan Anda juga membersihkan build gradle Anda.

Jika ada masalah baru, buat masalah baru 😁

Ditingkatkan, masih memiliki masalah yang sama. Haruskah kita mengubah properti gradle. milik saya menunjukkan FLIPPER_VERSION=0.33.1

Pembaruan: mengubah versi Flipper menjadi: 0.54.0 , masih tidak berfungsi.

orang-orang yang tidak mengikuti semua jenis perbaikan yang disediakan di atas dan yang ditingkatkan, harap konfirmasikan jika ini bukan masalah yang saya alami sendiri. Ini tidak memperbaiki masalah. @murilokrugner ??

@dlogvin Saya mengembalikan modifikasi dan memutakhirkan ke versi 63.3 tetapi masih tidak berhasil, apakah kita harus memperbarui Flipper ke beberapa versi?

Dalam proyek saya, Flipper dalam versi: 0.37.0

Kemudian pembaruan tidak berfungsi.

@safaiyeh

Pembaruan tidak berfungsi.

Ini masalah sederhana, hanya mengunggah dan tidak berhasil. Ayo buka edisi baru

Ini masalah sederhana, hanya mengunggah dan tidak berhasil. Ayo buka edisi baru

Ini adalah masalah sederhana yang URGENT untuk memperbaikinya. Banyak aplikasi terpengaruh oleh ini, mengunggah file adalah suatu keharusan untuk banyak layanan.

Kita harus def membuka masalah baru.

Anda dapat menggunakan ini untuk perbedaan penuh https://react-native-community.github.io/upgrade-helper/

Anda dapat menggunakan ini untuk perbedaan penuh https://react-native-community.github.io/upgrade-helper/

Sudah memanfaatkan itu, tidak ada yang membantu.

Mungkin itu pertanyaan bodoh:"D
Tapi bagaimana Anda meng-upgrade ke rilis terakhir 0.63.3?
menggunakan helper dan salin-tempel dif?

Mungkin itu pertanyaan bodoh:"D
Tapi bagaimana Anda meng-upgrade ke rilis terakhir 0.63.3?
menggunakan helper dan salin-tempel dif?

npx react-native upgrade coba, tapi saya 99,99% yakin "perbaikan" tidak akan berhasil.

Saya memperbarui proyek saya dari 63,2 menjadi 63,3 dan Flipper dari 0,37.0 menjadi 0,54.0

Tapi itu masih tidak berfungsi

Apakah saya melakukan sesuatu yang salah?

Setelah meningkatkan ke 0.63.3

Saya mendapat beberapa masalah aneh di iOS ketika saya memilih gambar dari gambar sistem file dan mengirim permintaan tidak berfungsi! tetapi ketika saya mengunduh gambar acak lalu coba lagi itu bekerja dengan sangat baik!! "Simulator 13.3"

Android bekerja dengan sangat baik ;)

Jadi, masalahnya belum terpecahkan.

Unggahan file bukanlah hal yang penting dalam versi baru ini.

Silakan buka kembali masalah @safaiyeh

Mari kita buka masalah baru. Dengan repro minimum dengan reaksi asli terbaru.

Satu untuk masalah @anastely ios dan

@dlogvin masalah Android.

Tolong tag saya tentang masalah ini.

Semua solusi yang saya temukan di internet, sejauh ini tidak ada yang berhasil.

Saya telah menghadapi masalah ini sejak versi 0.62 dari React Native.

Saya memiliki proyek di mana saya perlu mengunggah file tetapi tenggat waktunya singkat, jadi alternatifnya adalah mengonversi file ke String Base64 dan mengirimkannya ke backend.

Namun, memperbaiki masalah ini sangat mendesak.

Semua solusi yang saya temukan di internet, sejauh ini tidak ada yang berhasil.

Saya telah menghadapi masalah ini sejak versi 0.62 dari React Native.

Saya memiliki proyek di mana saya perlu mengunggah file tetapi tenggat waktunya singkat, jadi alternatifnya adalah mengonversi file ke String Base64 dan mengirimkannya ke backend.

Namun, memperbaiki masalah ini sangat mendesak.

Saya setuju, ini adalah masalah kritis dan memengaruhi SEMUA aplikasi yang menggunakan unggahan file.

@safaiyeh ya, saya akan membuka masalah. Akan dilakukan ketika saya tiba di rumah.

Teman-teman, saya tidak akan membelinya. Itu berhasil!

Solusi yang berhasil untuk saya: Saya memperbarui React Native ke 0.63.3 dan Flipper ke 0.54.0 tetapi masih tidak berfungsi.

Saya me-restart emulator Android dan membukanya lagi. dan itu berhasil!!

Terima kasih semua!

Teman-teman, saya tidak akan membelinya. Itu berhasil!

Solusi yang berhasil untuk saya: Saya memperbarui React Native ke 0.63.3 dan Flipper ke 0.54.0 tetapi masih tidak berfungsi.

Saya me-restart emulator Android dan membukanya lagi. dan itu berhasil!!

Terima kasih semua!

Menarik, masalahnya... Saya membuat aplikasi untuk rilis... diuji di perangkat fisik, hal yang sama. Saya mencoba menggunakan apk debug, kesalahan yang sama "kesalahan jaringan".

Belum terselesaikan. Akan segera membuka masalah.

Teman-teman, saya tidak akan membelinya. Itu berhasil!

Solusi yang berhasil untuk saya: Saya memperbarui React Native ke 0.63.3 dan Flipper ke 0.54.0 tetapi masih tidak berfungsi.

Saya me-restart emulator Android dan membukanya lagi. dan itu berhasil!!

Terima kasih semua!

Silakan coba jalankan di perangkat fisik pada debug dan rilis build please

Teman-teman, saya tidak akan membelinya. Itu berhasil!
Solusi yang berhasil untuk saya: Saya memperbarui React Native ke 0.63.3 dan Flipper ke 0.54.0 tetapi masih tidak berfungsi.
Saya me-restart emulator Android dan membukanya lagi. dan itu berhasil!!
Terima kasih semua!

Silakan coba jalankan di perangkat fisik pada debug dan rilis build please

@dlogvin Ini juga berfungsi pada perangkat fisik, saya yakin itu adalah sesuatu di cache

Teman-teman, saya tidak akan membelinya. Itu berhasil!
Solusi yang berhasil untuk saya: Saya memperbarui React Native ke 0.63.3 dan Flipper ke 0.54.0 tetapi masih tidak berfungsi.
Saya me-restart emulator Android dan membukanya lagi. dan itu berhasil!!
Terima kasih semua!

Silakan coba jalankan di perangkat fisik pada debug dan rilis build please

@dlogvin Ini juga berfungsi pada perangkat fisik, saya yakin itu adalah sesuatu di cache

Saya senang ini terpecahkan untuk Anda, tetapi di pihak saya ... Saya bahkan mencoba membangun yang bersih, masih belum berhasil ...

Jika ada yang masih menghadapi masalah di RN Versi 0.62 atau lebih tinggi, solusinya adalah:
Anda harus memberikan uri, nama & jenis media yang Anda unggah.

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

Lalu pergi ke Baris nomor 43 dan beri komentar pada baris ini:
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
di android/app/src/debug/java/com/"nama proyek"/ReactNativeFlipper.java

Saya telah menghabiskan hampir 8 jam untuk menggali solusi untuk kesalahan tersebut.

Setelah mencoba semua peretasan yang dibahas di atas, inilah yang menyelamatkan hari saya. Terima kasih banyak!

memutakhirkan ke 0.63.3 berhasil untuk saya akhirnya

dalam kasus saya, sebelumnya kode formulir unggahan ini berfungsi dengan baik:

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

kemudian saya menginstal beberapa dependensi lain dan kemudian mengembalikan kesalahan jaringan.
jadi saya harus mengubah jenisnya dengan awalan eksplisit:

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

RN 63.3 telah memperbaiki masalah ini. Berhasil!

memutakhirkan ke 63.3 diselesaikan untuk saya juga

Tidak..

RN 63.3 bekerja pada dasarnya karena versi siripnya menggunakan 0.54.0.
Jika RN 63.3 masih tidak berfungsi, kami harus memeriksa
android:
FLIPPER_VERSION dalam file android/gradle.properties
iOS:
pemasangan pod --repo-update

Saya menggunakan RN 0.63.3 dan memperbarui FLIPPER_VERSION ke 0.54.0 tetapi masih tidak berfungsi. Ada solusi lain yang tersedia?

melakukannya, itu bukan karena versi sirip, saya menggunakan react -native 0.62.2 dan versi sirip: 0.33.1, mengomentari baris 43 di Android/app/src/debug/Java/com/maxyride/app/ driver/ReactNativeFlipper.java dan pastikan jenis dalam unggahan ditentukan dengan benar,

Kita harus menggunakan alat ini untuk meningkatkan ke RN 63.3. Pastikan setiap penggabungan dengan benar.
https://react-native-community.github.io/upgrade-helper/

TERSELESAIKAN!
Ubah versi navite reaksi di package.json:
"react-asli": "0.63.3"
Di ANDROID:
android/gradle.properties
Ubah versi Flipper:
FLIPPER_VERSION=0.54.0
Setelah itu, hapus instalan aplikasi di perangkat dan jalankan proyek lagi. :)
Langkah-langkah IOS:
https://react-native-community.github.io/upgrade-helper/ (cukup pilih versi RN terbaru atau gunakan 0.63.3)

Mungkin ini akan menyelamatkan seseorang. Terjadi kesalahan serupa (jangan unggah file!!!) dengan permintaan jaringan apa pun. Dalam kasus saya, masalahnya ada pada sertifikat ssl dari server https saya. Jangka waktu sertifikat kadaluarsa, dan itulah penyebab kesalahan.

RN: 0.61.5

Saya mencoba semua yang disarankan di utas ini dan mencari saran di mana-mana dan tidak ada. Akhirnya, saya menyadari masalah ini. Mungkin itu akan membantu orang lain.

Itu sebenarnya salah saya... Saya memanggil Image picker di komponen anak. Pengguna memilih gambar di sana. Mengklik simpan, yang mengembalikannya ke komponen sebelumnya. Mereka akan melengkapi formulir dan gambar akan diunggah setelah mereka menyelesaikan formulir.

Masalahnya adalah, di komponen anak, saya menelepon ImagePicker.clear() . Itu agak beri dan jadi saya tidak langsung melihatnya. Saya mendapatkan "kesalahan jaringan yang sama tidak dapat membaca file untuk uri" yang didapat semua orang, jadi saya pikir untuk kasus khusus saya, saya sangat menyesatkan dengan berpikir ada beberapa masalah lain yang terjadi.

Saya kira hal baiknya adalah saya akhirnya memutakhirkan versi asli reaksi saya, sirip, dan Gradle ke yang terbaru. Jadi ada itu. Di sisi lain saya kehilangan 3 hari untuk ini. Pemrograman itu aneh.

Jika ada yang masih menghadapi masalah di RN Versi 0.62 atau lebih tinggi, solusinya adalah:
Anda harus memberikan uri, nama & jenis media yang Anda unggah.

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

Lalu pergi ke Baris nomor 43 dan beri komentar pada baris ini:
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
di android/app/src/debug/java/com/"nama proyek"/ReactNativeFlipper.java
Saya telah menghabiskan hampir 8 jam untuk menggali solusi untuk kesalahan tersebut.

Setelah mencoba semua peretasan yang dibahas di atas, inilah yang menyelamatkan hari saya. Terima kasih banyak!

Jangan bekerja

Salah dipandu oleh beberapa posting di internet yang menyatakan bahwa bagian file:// pada jalur untuk android harus dihapus sebelum mengaturnya ke URI untuk data formulir. Menggunakan jalur apa adanya dan menghapus builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); seperti yang disebutkan di atas, berhasil bagi saya untuk versi reaksi 0.62.2 untuk Android dan ios

masih ada masalah, menggunakan RN 0.63.3 sirip 0.54.0, mengupload foto baik-baik saja tetapi ketika mengunggah video memiliki kesalahan jaringan, sakit menggunakan metode lain seperti kata @murilokrugner , karena tenggat waktu saya juga pendek

masih ada masalah, menggunakan RN 0.63.3 sirip 0.54.0, mengupload foto baik-baik saja tetapi ketika mengunggah video memiliki kesalahan jaringan, sakit menggunakan metode lain seperti kata @murilokrugner , karena tenggat waktu saya juga pendek

untuk kalian jika Anda masih mengalami masalah ini, saya punya solusi sederhana:

  1. instal rn-fetch-blob ikuti instruksi mereka https://github.com/joltup/rn-fetch-blob
  2. kemudian ikuti instruksi ini https://github.com/joltup/rn-fetch-blob#multipartform -data-example-post-form-data-with-file-and-data

milikku bekerja dengan baik

@abumostafa Anda seorang legenda. Terima kasih banyak.

Siapa pun yang masih menghadapi masalah ini dengan 0.63.3 dan sirip terbaru - ubah ambil ke XMLHttpRequest. Bekerja dengan baik.

Masih Menghadapi masalah yang sama menggunakan :
RN 0.63.3
sirip 0.54.0

Saya mengomentari baris 43 di Android/app/src/debug/Java/com/maxyride/app/drivers/ReactNativeFlipper.java

Masih masalah yang sama saya mencoba hampir semuanya tidak berfungsi.

Untuk membagikan solusi saya adalah dengan memecahkan kode dengan kamera di base64 dan kemudian mengirimkannya ke server dalam format itu. Saya benar-benar kecewa bagaimana pada tahun 2020 beberapa fitur kecil dan sederhana yang dipromosikan dari pengembang, tidak berfungsi selama..tahun.

TLDR: Siapa pun yang mengalami masalah mengirim file, coba konversi ke base64 & kirimkan.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat