react-native 上傳檔案時報錯,Network request failed
報錯情景:
版本:
"react": "16.13.1", "react-native": "0.63.2",
fetch的其他請求都可以,但是上傳檔案報錯。其實,查詢文件可知,0.62.0版本以上都有這個問題。程式碼回滾到RN 0.61.5版本就不會有以上問題。
報錯內容: 請求沒有到後臺,報錯 ‘Network request failed’
問題出現原因:
Flipper Network構建initializeFlipper時出現的問題。
解決辦法:
(1)Flipper Network構建initializeFlipper時出現的問題。
找到/android/app/src/main/java/com/{your_project}/MainApplication.java
將initializeFlipper(this, getReactNativeHost().getReactInstanceManager())註釋
NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); NetworkingModule.setCustomClientBuilder( new NetworkingModule.CustomClientBuilder() { @Override public void apply(OkHttpClient.Builder builder) { // builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); } });
或者找到android/app/src/debug/java/com/**/ReactNativeFlipper.java檔案註釋43行
38 NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); 39 NetworkingModule.setCustomClientBuilder( 40 new NetworkingModule.CustomClientBuilder() { 41 @Override 42 public void apply(OkHttpClient.Builder builder) {43 // builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); 44 } 45 }); 46 client.addPlugin(networkFlipperPlugin);
(2)Flipper 已經在0.39.0版本修復了問題的一部分,之所以說是一部分,是因為我升級到0.39.0+以後仍有問題,我測試到升級Flipper 0.51.2仍然報錯,但是解決了部分人的問題,比如RN0.62.0版本。
Flipper升級方法:
轉到android/gradle.properties
並新增此行
FLIPPER_VERSION=0.52.1
同時在android/app/build.gradle其中包含以下幾行
dependencies { // .... debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") { exclude group:'com.facebook.fbjni' } debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { exclude group:'com.facebook.flipper' } debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") { exclude group:'com.facebook.flipper' } // ... }
(3)如果有人在RN 0.62或更高版本中仍然遇到問題,解決方案是:必須提供uri,名稱和要上載的媒體型別。
formData.append('media_incident', { uri: image.path, type: image.mime, name: 'filename.jpg', });
8個小時解決了這個問題!!!
Enjoy Coding,enjoy life!