Отправить файл на сервер в React Native

Рейтинг: 0Ответов: 1Опубликовано: 31.03.2023

Столкнулся с проблемой загрузки изображения на сервер через react-native. Дело в том, что при тестировании на постмане все отлично работало, но только начал пробовать отправлять данные ( объект с данными и картинку ) с интерфейса приложения - ничего не выходит. Пытался найти свести свои данные для запроса к тому же формату что и в постмане, но не нашел никакой информации. Через формДата также не получалось. Думал дело еще в rtq query, так как запросы через него все проводил, но нет, на обычном фетче и аксиосе так же вылетают ошибки, хотя и слегка другие. Максимально что получалось добиться только undefinde на сервере в pipe с валидацией а затем пустое тело объекта. Вроде задача достаточно тривиальная, но никак не могу уже 2й день разобраться. На скрине выше то, что сервер принимает от постмана, собственно что и хотелось бы сделать что б с фронта такие данные отправлять.

const RegisterForm = () => {
    const avatarImg = require("../../../assets/img/emptyAvatar.png")
    const [register] = useRegistrationMutation()
    const navigation = useNavigation()

    const registerHandler = async (values) => {
        try {
            const data = {
                username: values.username,
                email: values.email,
                password: values.password,
            }
            const imageURI = Asset.fromModule(avatarImg).uri;
            const formData = new FormData();
            formData.append("data", JSON.stringify(data))
            formData.append('avatar', {
                uri: imageURI,
                name: 'emptyAvatar.png',
                type: 'image/png',
            })

            const response = await register(data);
            if (response?.error) {
                Alert.alert("Registration Error", response.error.data.message)
            }
            if (response?.data?.message) {
                Alert.alert("Message", response?.data?.message)
                navigation.navigate("LoginScreen")
            }

        } catch (e) {
            console.log(e);
        }
    };


    return (


        <Formik
            initialValues={{username: "test", email: "test@gmail.com", password: "12345678"}}
            validationSchema={registrationValidationSchema}
            onSubmit={values => registerHandler(values)}
        >
            {(props) => (


                <View>
                    <CustomInput
                        inputLabel={i18n.t("registerScreen.emailLabel")}
                        placeholder={i18n.t("registerScreen.emailLabel")}
                        onChangeText={props.handleChange('email')}
                        onBlur={props.handleBlur('email')}
                        value={props.values.email}
                    />
                    {
                        props.errors.email && props.touched.email ? (
                            <Text style={styles.validationErrorText}>{props.errors.email}</Text>
                        ) : <View></View>
                    }

                    <CustomInput
                        inputLabel={i18n.t("registerScreen.usernameLabel")}
                        placeholder={i18n.t("registerScreen.usernameLabel")}
                        onChangeText={props.handleChange('username')}
                        onBlur={props.handleBlur('username')}
                        value={props.values.username}
                    />
                    {
                        props.errors.username && props.touched.username ? (
                            <Text style={styles.validationErrorText}>{props.errors.username}</Text>
                        ) : <View></View>
                    }

                    <CustomInput
                        inputLabel={i18n.t("registerScreen.passwordLabel")}
                        placeholder={i18n.t("registerScreen.passwordLabel")}
                        onChangeText={props.handleChange('password')}
                        onBlur={props.handleBlur('password')}
                        value={props.values.password}
                        isPassword={true}
                    />
                    {
                        props.errors.password && props.touched.password ? (
                            <Text style={styles.validationErrorText}>{props.errors.password}</Text>
                        ) : <View style={{height: 20}}></View>
                    }
                    <CustomButton
                        propsButtonStyles={{marginTop: 10}}
                        title={i18n.t("registerScreen.btnRegister")}
                        pressFunc={props.handleSubmit}
                    />
                </View>
            )}
        </Formik>
    );
};

Ответы

▲ 0

Все, получилось сделать. Правда немного не так как хотелолось, но все же. Дело было в том, что почему то rtk query не хотел нормально работать с файлами, по этому и была такая проблема. Я предполагаю, что там есть такая возможность, но если задать заголовок как мультипарт дата, то он не видит boundery свойства и не может распарсить нормально. В общем. Через обычный фетч все отлично сработало и автоматически свело запрос в точности как постман