Проблема с загрузкой изображения с помощью react-native и PHP (CodeIgniter) в качестве серверной части

У меня есть сценарий приложения с нативным реагированием и CodeIgniter в качестве бэкэнда.

У меня есть фрагмент кода для загрузки изображения, выбранного с помощью response-native-image-picker, как показано ниже:

  let formData = new FormData();
  let imageBody = {
                uri: newImage,
                name: 'profilepicture.jpg',
                type: 'image/jpeg',
            };
formData.append('file', (imageBody)) // case 1 gives network error
formData.append('file', JSON.stringify(imageBody)) //case 2 goes OK

 apiUpdateUser(formData)
            .then(res => {

                this.setState({ showSnack: true, snackText: 'Profile Picture Updated'})
            })
            .catch(err => {
                this.setState({ showSnack: true, snackText: 'Update Failed' })
            });

Метод apiUpdateUser выглядит так:

export const apiUpdateUser = body => {
return new Promise((resolve, reject) => {
    axios
        .post(ApiRoutes.updateUser, body, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        })
        .then(res => {
            resolve(res.data);
        })
        .catch(err => {
            reject(Constant.network.networkError);
        });
});
};

Код PHP на бэкэнде для обработки этой загрузки как обычно:

$file=$this->request->getFile('file');//in CI
$file=$_FILES['file'];//in normal php

Моя проблема в том, что я ничего не получаю в $file variabe ни одним из методов. В обоих случаях файловая переменная пуста.

Я проверил реализацию в React Native, и она, похоже, не содержит ошибок по сравнению с учебными пособиями / демонстрациями в Интернете. Также способ обработки на бэкэнде очевиден и хорошо.

Я могу легко выполнить эту загрузку с помощью POSTMAN, но с помощью react-native я столкнулся с этой ошибкой. Кто-нибудь может показать мне здесь немного света ??


react-native php file-upload react-native-image-picker codeigniter-4
person Raavan    schedule 14.07.2020    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Я использую VUE и отправляю файлы с помощью Axios. Думаю, это может вам помочь.

Я использую следующий способ формы данных для установки файлов или изображений.

formData.append('file', this.form.image_url, this.form.image_url.name);

Здесь this.form.image_url напрямую ссылается на $event.target.files[0];, где $ event нацелено на ввод.

В бэкэнде он такой же, как у вас здесь.

У меня это хорошо работает. Я не уверен, что вы передаете как imageBody, поэтому сложно это комментировать.

person Dhaval Chheda    schedule 15.07.2020

arrow_upward
1
arrow_downward

Вы можете попробовать это

 let imageBody = {
                uri: newImage,
                name: 'profilepicture.jpg',
                type: 'image/jpeg',
            };
apiUpdateUser(imageBody)
            .then(res => {

                this.setState({ showSnack: true, snackText: 'Profile Picture Updated'})
            })
            .catch(err => {
                this.setState({ showSnack: true, snackText: 'Update Failed' })
            });

export const apiUpdateUser = body => {
return new Promise((resolve, reject) => {
    axios
        .post(ApiRoutes.updateUser, body, {
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(res => {
            resolve(res.data);
        })
        .catch(err => {
            reject(Constant.network.networkError);
        });
});
};
person Ankit Kumar    schedule 15.07.2020
comment
Это привело к той же участи. :( - person Raavan; 15.07.2020

arrow_upward
0
arrow_downward

Оказывается, виновником был JSON.stringify().

Без этой строки приложение выдавало ошибку сети. Вот почему я добавил его наугад, чтобы посмотреть, не является ли это причиной ошибки.

Поскольку проблема с сетевой ошибкой была решена с помощью этого дополнения, я не задумывался об этом и думал, что это проблема с загрузкой файла. На самом деле, теперь я вижу, что это известная проблема версии React native flipper, которую я использовал, и которую мне удалось решить.

person Raavan    schedule 15.07.2020