Как сохранить изображение в API в React Native с Expo?

Я создаю собственные приложения для реагирования, и есть функция для изменения изображения профиля пользователя. И я использую камеру с выставки, чтобы сделать новую фотографию профиля, так как я создал свои собственные приложения для реагирования с использованием crna.

Я попробовал руководство в следующем фрагменте.

  _takePhoto = async () => {
    const {
      status: cameraPerm
    } = await Permissions.askAsync(Permissions.CAMERA);

    const {
      status: cameraRollPerm
    } = await Permissions.askAsync(Permissions.CAMERA_ROLL);

    if (cameraPerm === 'granted' && cameraRollPerm === 'granted') {
      let pickerResult = await ImagePicker.launchCameraAsync({
        allowsEditing: true,
        aspect: [4, 3],
      });

      this._handleImagePicked(pickerResult);
    }
  };

_pickImage = async () => {
    const {
      status: cameraRollPerm
    } = await Permissions.askAsync(Permissions.CAMERA_ROLL);


    if (cameraRollPerm === 'granted') {
      let pickerResult = await ImagePicker.launchImageLibraryAsync({
        allowsEditing: true,
        aspect: [4, 3],
      });

      this._handleImagePicked(pickerResult);
    }
  };

  _handleImagePicked = async pickerResult => {
    let uploadResponse, uploadResult;

    try {
      this.setState({
        uploading: true,
      });

      if (!pickerResult.cancelled) {
        uploadResponse = await uploadImageAsync(pickerResult.uri);
        uploadResult = await uploadResponse.json();

        this.setState({
          picture_profile: uploadResult.location
        });
      }
  }
    catch (e) {
      console.info({ uploadResponse });
      console.info({ uploadResult });
      console.info({ e });
      Alert.alert('Upload failed, sorry :(');
    } finally {
      this.setState({
        uploading: false,
      });
    }
  };


async function uploadImageAsync(uri){
    let apiUrl= `someURL`;
    let uriParts = uri.split('.');
    let fileType = uriParts[uriParts.length - 1];
    let formData = new FormData();
    formData.append('photo', {
        uri,
        name:`photo.${fileType}`,
        type: `picture_profile/${fileType}`,
    });
    //update_password
    let option  = {
        method: 'POST',
        body: formData,
        headers: {
            Authorization: token,
            'content-type': 'multipart/form-data',
        },
    };
    return fetch(apiUrl, option);
}

Но сохранить картинку в API не удалось. Также у меня появляется это сообщение об ошибке, когда я пытаюсь загрузить изображение.

Possible Unhandled Promise Rejection (id:2): TypeError this._handleImagePicked is not a function

Может ли кто-нибудь помочь мне, что делать? Заранее спасибо.

Какую ошибку вы получаете от API?

Ismailp 25.10.2018 11:13

@Ismailp Я получил это сообщение об ошибке `Возможное отклонение необработанного обещания (id: 2): TypeError this. _handleImagePicked не является функцией сразу после того, как я выберу новое изображение из галереи. Я думаю, что получу то же сообщение об ошибке, если сделаю новый снимок ... (я не пробовал, так как использую симулятор выставки)

hehe 25.10.2018 11:37

Опубликованная вами ошибка не имеет ничего общего с вашим API. Нужно увидеть еще код, например конструктор и т. д.

Ismailp 25.10.2018 11:55
Как сделать HTTP-запрос в Javascript?
Как сделать HTTP-запрос в Javascript?
В JavaScript вы можете сделать HTTP-запрос, используя объект XMLHttpRequest или более новый API fetch. Вот пример для обоих методов:
Создание ресурсов API Laravel: Советы по производительности и масштабируемости
Создание ресурсов API Laravel: Советы по производительности и масштабируемости
Создание API-ресурса Laravel может быть непростой задачей. Она требует глубокого понимания возможностей Laravel и лучших практик, чтобы обеспечить...
Как создать простое погодное приложение на Python с API OpenWeatherMap
Как создать простое погодное приложение на Python с API OpenWeatherMap
Этот учебник проведет вас через процесс создания простого погодного приложения с помощью Python и OpenWeatherMap API.
Пакеты Java
Пакеты Java
Пакет java - это группа классов, интерфейсов и подпакетов схожего типа. Думайте об этом как о папке в каталоге файлов. Мы используем пакеты, чтобы...
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...
0
3
435
0

Другие вопросы по теме

Совместное использование Twitter в нескольких публикациях с использованием библиотеки response-naive-share (https://github.com/react-native-community/react-native-share)
React Native - FlatList делает запрос на получение для каждого элемента в renderItems
Я хочу свести к минимуму приложение при нажатии кнопки возврата на устройствах Android в response-native-router-flux
Как обновить значение, введенное в текстовое поле, для реагирования на API?
Реагировать на вызов функции кнопки заголовка навигации в навигаторе вкладок
React Native делает запущенные сервисы
React-native Fb (ошибка: не найден подходящий конструктор для AccessToken)
Обнаружена ошибка [EXP-00056: обнаружена ошибка ORACLE 1017] при нажатии команды expo build: android в командной строке f
Как отправить объект / строку из Android Activity onActivityResult, чтобы реагировать на родной
Я использую React Native для разработки и в настоящее время сталкиваюсь с проблемой поддержки gif в автономных сборках Android