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

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

0 голосов
/ 14 июля 2020

У меня есть сценарий приложения с нативным реагированием и 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 любым из методов. Переменная file пуста в обоих случаях.

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

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

Ответы [ 3 ]

1 голос
/ 15 июля 2020

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

 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);
        });
});
};
1 голос
/ 15 июля 2020

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

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

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

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

В бэкэнде это то же самое, что и здесь.

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

0 голосов
/ 15 июля 2020

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

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

...