Zufälliger Netzwerkfehler im reag-nativen Android beim Hochladen von Bild mit Axios FormData ⇐ Android

[Guest]

Ich verwende Axios in einer nativen React-Anwendung, um Anwesenheitsdaten mit einem Selfie-Bild als Mehrfach-/Form-Daten zu senden. Manchmal begegne ich zufällig auf einen "Netzwerkfehler", wenn ich versuche, die Postanforderung zu stellen. < /P>
Fehler < /p>

Code: Select all

{"message":"Network Error","name":"AxiosError","stack":"AxiosError: Network Error"}
< /code>
Hier ist ein Ausschnitt meines Codes: < /p>
import {Camera, useCameraDevice} from 'react-native-vision-camera';
import ImageResizer from '@bam.tech/react-native-image-resizer';
const photo = await camera.takePhoto({
qualityPrioritization: 'speed',
photoQualityBalance:'speed',
});
const resizedUri = await ImageResizer.createResizedImage(photo.path, 800, 600, 'JPEG', 80);
setLoading(true);
saveAttendence({position, photo:resizedUri||photo});
< /code>
API -Anruf < /p>
export const callAttendencePostApi = async (
userId,
accessToken,
networkConnected,
data,
attendenceData,
) => {
if (networkConnected) {

const {longitude, latitude} = data?.position?.coords;
const {path} = data?.photo;

const newImageUri = 'file://' + path.replace(/^file:\/{2,}/, '/');
const imageFile = {
uri: newImageUri,
type: mime.getType(newImageUri)||'image/jpeg',
name: newImageUri.split('/').pop(),
};
const currentTime = moment().format('HH:mm:ss');
const currentDate = moment().format('YYYY-MM-DD');
const formdata = new FormData();
formdata.append('userId', userId);
formdata.append('token', accessToken);
if (!attendenceData?.attendance_intime) {
formdata.append('attendanceDate', currentDate);
formdata.append('attendanceIntime', currentTime);
formdata.append('inLet', latitude);
formdata.append('inLong', longitude);
formdata.append('inSelfie',imageFile);
} else {
formdata.append('attendanceDate', currentDate);
formdata.append('attendanceOuttime', currentTime);
formdata.append('outLet', latitude);
formdata.append('outLong', longitude);
formdata.append('outSelfie', imageFile);
}
const headers = {
'content-type': 'multipart/form-data',
timeout: 60000
};

try {
const response = await axios.post(
`${baseURL}saveAttendance`,
formdata,
{ headers }
);
return response.data;
} catch (e) {
return e;
}
} else {
Alert.alert(AlertTitle.appname, AlertTitle.validations.internet_connection);
}
};
< /code>
Manifest.xml

build.gradle
// Build-Datei mit Top-Level, in der Sie Konfigurationsoptionen hinzufügen können, die allen Unterprojekten/Modulen gemeinsam sind.

Code: Select all

buildscript {
ext {
buildToolsVersion = "33.0.0"
minSdkVersion = 21
compileSdkVersion = 34
targetSdkVersion = 34
googlePlayServicesVersion = "17.0.0"
// We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
ndkVersion = "23.1.7779620"
}
repositories {
google()
mavenCentral()
}
dependencies {
classpath("com.android.tools.build:gradle:7.3.1")
classpath("com.facebook.react:react-native-gradle-plugin")
}
}

app/build.gradle

Code: Select all

apply plugin: "com.android.application"
apply plugin: "com.facebook.react"

import com.android.build.OutputFile

/**
* This is the configuration block to customize your React Native Android app.
* By default you don't need to apply any configuration, just uncomment the lines you need.
*/
react {
/* Folders */
//   The root of your project, i.e. where "package.json" lives. Default is '..'
// root = file("../")
//   The folder where the react-native NPM package is. Default is ../node_modules/react-native
// reactNativeDir = file("../node_modules/react-native")
//   The folder where the react-native Codegen package is. Default is ../node_modules/react-native-codegen
// codegenDir = file("../node_modules/react-native-codegen")
//   The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js
// cliFile = file("../node_modules/react-native/cli.js")

/* Variants */
//   The list of variants to that are debuggable. For those we're going to
//   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
//   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
// debuggableVariants = ["liteDebug", "prodDebug"]

/* Bundling */
//   A list containing the node command and its flags. Default is just 'node'.
// nodeExecutableAndArgs = ["node"]
//
//   The command to run when bundling. By default is 'bundle'
// bundleCommand = "ram-bundle"
//
//   The path to the CLI configuration file.  Default is empty.
// bundleConfig = file(../rn-cli.config.js)
//
//   The name of the generated asset file containing your JS bundle
// bundleAssetName = "MyApplication.android.bundle"
//
//   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
// entryFile = file("../js/MyApplication.android.js")
//
//   A list of extra flags to pass to the 'bundle' commands.
//   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
// extraPackagerArgs = []

/* Hermes Commands */
//   The hermes compiler command to run. By default it is 'hermesc'
// hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
//
//   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
// hermesFlags = ["-O", "-output-source-map"]
}

/**
* Set this to true to create four separate APKs instead of one,
* one for each native architecture. This is useful if you don't
* use App Bundles (https://developer.android.com/guide/app-bundle/)
* and want to have separate APKs to upload to the Play Store.
*/
def enableSeparateBuildPerCPUArchitecture = false

/**
* Set this to true to Run Proguard on Release builds to minify the Java bytecode.
*/
def enableProguardInReleaseBuilds = false

/**
* The preferred build flavor of JavaScriptCore (JSC)
*
* For example, to use the international variant, you can use:
* `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
*
* The international variant includes ICU i18n library and necessary data
* allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
* give correct results when using with locales other than en-US. Note that
* this variant is about 6MiB larger per architecture than default.
*/
def jscFlavor = 'org.webkit:android-jsc:+'

/**
* Private function to get the list of Native Architectures you want to build.
* This reads the value from reactNativeArchitectures in your gradle.properties
* file and works together with the --active-arch-only flag of react-native run-android.
*/
def reactNativeArchitectures() {
def value = project.getProperties().get("reactNativeArchitectures")
return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
}

android {
ndkVersion rootProject.ext.ndkVersion

compileSdkVersion rootProject.ext.compileSdkVersion

namespace "com.qssindia"
defaultConfig {
applicationId "com.qssindia"
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 208
versionName "2.0.8"
}

splits {
abi {
reset()
enable enableSeparateBuildPerCPUArchitecture
universalApk false  // If true, also generate a universal APK
include (*reactNativeArchitectures())
}
}
signingConfigs {
debug {
storeFile file('debug.keystore')
storePassword 'android'
keyAlias 'androiddebugkey'
keyPassword 'android'
}
release {
if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
storeFile file(MYAPP_UPLOAD_STORE_FILE)
storePassword MYAPP_UPLOAD_STORE_PASSWORD
keyAlias MYAPP_UPLOAD_KEY_ALIAS
keyPassword MYAPP_UPLOAD_KEY_PASSWORD
}
}
}
buildTypes {
debug {
signingConfig signingConfigs.debug
}
release {
// Caution! In production, you need to generate your own keystore file.
// see https://reactnative.dev/docs/signed-apk-android.
signingConfig signingConfigs.release
minifyEnabled enableProguardInReleaseBuilds
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
}
}

// applicationVariants are e.g.  debug, release
applicationVariants.all { variant ->
variant.outputs.each { output ->
// For each separate APK per architecture, set a unique version code as described here:
// https://developer.android.com/studio/build/configure-apk-splits.html
// Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
def abi = output.getFilter(OutputFile.ABI)
if (abi != null) {  // null for the universal-debug, universal-release variants
output.versionCodeOverride =
defaultConfig.versionCode * 1000 + versionCodes.get(abi)
}

}
}
}

dependencies {
// The version of react-native is set by the React Native Gradle Plugin
implementation 'com.squareup.okhttp3:okhttp:4.9.1'
implementation("com.squareup.okhttp3:okhttp-urlconnection:4.9.1")
implementation 'com.squareup.okhttp3:logging-interceptor:4.9.1'
implementation ('org.jetbrains:annotations:16.0.2')
implementation("com.facebook.react:react-android")
implementation project(':react-native-vector-icons')
implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0")
implementation ('com.squareup.okhttp3:okhttp:4.9.0' )
debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
exclude group:'com.squareup.okhttp3', module:'okhttp'
}

debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
if (hermesEnabled.toBoolean()) {
implementation("com.facebook.react:hermes-android")
} else {
implementation jscFlavor
}
}
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)