Ошибка сетевого запроса при реагировании на исходное изображение загрузки - PullRequest
Новая
       29

Ошибка сетевого запроса при реагировании на исходное изображение загрузки

0 голосов
/ 18 июня 2020

Я пытаюсь захватить и загрузить изображение на сервер из react native, однако при отправке http-запроса получаю следующую ошибку:

[TypeError: сбой сетевого запроса]

Вот мой код, я следовал этому руководству:

https://heartbeat.fritz.ai/how-to-upload-images-in-a-react-native-app-4cca03ded855

import React from 'react';
import {View, Image, Button} from 'react-native';
import ImagePicker from 'react-native-image-picker';

export default class App extends React.Component {
  state = {
    photo: null,
  };

  createFormData = (photo) => {
    const data = new FormData();

    data.append('photo', {
      name: photo.fileName,
      type: photo.type,
      uri:
        Platform.OS === 'android'
          ? photo.uri
          : photo.uri.replace('file://', ''),
    });

    data.append('id', 1);
    return data;
  };

  handleChoosePhoto = () => {
    const options = {
      noData: true,
    };
    ImagePicker.launchImageLibrary(options, (response) => {
      if (response.uri) {
        this.setState({photo: response});
      }
    });
  };

  handleUploadPhoto = () => {
    fetch('http://192.168.1.104:3000/', {
      method: 'POST',
      body: this.createFormData(this.state.photo),
    })
      .then((response) => response.text())
      .then((response) => {
        console.log('upload success', response);
      })
      .catch((error) => {
        console.log('upload error', error);
      });
  };

  render() {
    const {photo} = this.state;
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        {photo && (
          <React.Fragment>
            <Image
              source={{uri: photo.uri}}
              style={{width: 300, height: 300}}
            />
            <Button title="Upload" onPress={this.handleUploadPhoto} />
          </React.Fragment>
        )}
        <Button title="Choose Photo" onPress={this.handleChoosePhoto} />
      </View>
    );
  }
}

Я пробовал:

  • Добавить «Content: multipart / form-data» в заголовки HTTP-запросов
  • Добавить Accept: Accept: application / json "в заголовки HTTP-запросов

Я заметил, что запрос не выполняется, только когда я добавляю объект фотографии в «FormData», то есть HTTP-запрос выполняется правильно, когда я удаляю следующий код: 

data.append('photo', {
      name: photo.fileName,
      type: photo.type,
      uri:
        Platform.OS === 'android'
          ? photo.uri
          : photo.uri.replace('file://', ''),
    });

Edit 02-07 -2020

Наконец-то я нашел решение здесь:

https://github.com/facebook/react-native/issues/28551#issuecomment -610652110

Ответы [ 2 ]

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

Это решение также работает:

У меня была такая же проблема в моем проекте с реактивной версией 0.62. Я обновил флиппер до "0.41.0", и он сработал.

В gradle.properities

FLIPPER_VERSION = 0.41.0

gradle.properties находится по адресу PROJECT_ROOT/android

0 голосов
/ 18 июня 2020

имел аналогичную проблему несколько дней go. Проблема для меня заключалась в том, что photo.type возвращает неверный тип. Я просто добавляю его вручную. 

fd.append('documentImages', {
      name: getImgId(img.uri) + '.jpg',
      type: 'image/jpeg',
      uri: Constants.platform.android
        ? img.uri
        : img.uri.replace('file://', ''),
    })
...