React Native Fetch выдает ошибку «Ошибка сетевого запроса»

Question

У меня есть следующий код для создания события с изображением и некоторыми параметрами тела. Он работал нормально, когда я делал это без изображения, я использую react-native-image-crop-picker для выбора изображений. Я получаю сообщение об ошибке «Сбой сетевого запроса» при публикации данных из реактивной системы. Запрос никогда не доходит до моего бэкэнда, так как я не получаю журналы там. Работает с почтальонами.

МОЙ КОД:

const { name, date, description, location, uri, mime, time } = this.state;

    const formData = new FormData();
    formData.append('name', name)
    formData.append('date', date)
    formData.append('description', description)
    formData.append('location', location)
    formData.append('time', time)

    formData.append('image',{
      uri:uri,
      mime:'image/jpeg',
      name:`image${moment()}`
    })


    alert(JSON.stringify(formData));
    const config = {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'multipart/form-data',
          },
          body: formData,
      };

    fetch(`http://${Config.apihost}:${Config.port}/events`,config).then((res) => res.json())
      .then((res) => {
        this.setState({ modalVisible: false, name:'', date: moment().format('YYYY-MM-DD'), description:'', Location: 'AlHedaya Masjid' })
        this.props.addEvent(res.message);

      // this.props.navigation.goBack();
      }).catch((err) => alert(err));

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

 const data = new FormData();
        data.append('name', 'avatar');
        images.map((res, i) => {
          data.append('fileData[]', {
            uri: res.path,
            type: res.mime,
            name: `image${i}${moment()}`
          });
        })
        const config = {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'multipart/form-data',
          },
          body: data,
        };
        fetch(`http://${Config.apihost}:${Config.port}/events/${this.state.item.id}/photos`, config)
          .then((checkStatusAndGetJSONResponse) => checkStatusAndGetJSONResponse.json())
          .then((response) => {

            if (response.status && response.message.length > 0) {
              var images = this.state.images;
              response.message.map(file => {
                images.push(`http:${Config.apihost}:${Config.port}/images/${file.id}`);
              });
              this.setState({ images });
            }
          }).catch((err) => { alert(err) });

Я действительно не вижу разницы между двумя кодами, но верхний код дает мне ошибку.

• Я тестирую на Android
• Я использую IP-адрес вместо localhost (мои другие запросы работают так, что это не соответствует уравнению)
• Ни одно из решений по этой ссылке не сработало Реагировать на собственный сетевой запрос fetch () не удалось

Я что-то упустил?

Answer 1

В первом фрагменте кода вы написали mime вместо type .

formData.append('image',{
      uri:uri,
      **mime:'image/jpeg**',
      name:`image${moment()}`
    })

оно должно быть как ниже приведенный фрагмент

formData.append('image',{
          uri:uri,
          type:'image/jpeg',
          name:`image${moment()}`
        })