сообщение формы с прикреплением файла вызывает ошибку сети / React Native + реагирует на родное средство выбора изображений

Я использую react-native-image-picker для получения сведений об изображении и пытаюсь загрузить его на внутренний сервер https. запрос не удался и вызывает ошибку сети. Не удалось установить соединение с внутренним сервером. Проблема с formdata, который я отправляю. Не могли бы вы предложить header и другую информацию, если я пропустил.

  export const postImage = async state => {  

    let formData = new FormData();

    formData.append('image', {
      uri : state.photo.uri,
      type: state.photo.type,
      name : state.photo.fileName
    });


    const config = {
      headers: {
        'Content-Type': 'multipart/form-data',
        Accept: "application/x-www-form-urlencoded",
        'Accept': 'application/json'
      },
    };

    try {
    return $http.post('/image/save', formData, config)
    .then(response => response)
    .catch(error => error)
    } catch(error) {
        console.log(error)
    }
  }

Среда: - версия Axios ^ 0.19.2 - дополнительные версии библиотеки [React 16.11.0, React Native 0.62.1]


react-native axios react-native-image-picker
person kulls    schedule 05.04.2020    source источник

Ответы (5)


arrow_upward
2
arrow_downward

Возникла проблема с флиппером, можно обновить его до версии 0.39.0 и выше.

Эта проблема отслеживается здесь: https://github.com/facebook/react-native/issues/28551

Исправление: https://github.com/facebook/flipper/issues/993#issuecomment-619823916

This should be fixed in version 0.39.0. To upgrade, edit android > gradle.properties

# Version of flipper SDK to use with React Native
FLIPPER_VERSION=0.39.0  // edit this manually
person Rishabh Saxena    schedule 01.05.2020

arrow_upward
2
arrow_downward

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

person SequenceDigitale.com    schedule 16.08.2020

arrow_upward
1
arrow_downward

На решение этой проблемы у меня ушло более 5 часов. Я собирался сдаться, когда наконец смог решить проблему.

Проблема, с которой я столкнулся и которая близка к тому, о которой вы упоминаете, заключается в том, что я получал NetworkError при использовании expo-image-picker и пытался загрузить файл с помощью axios. Он отлично работал в iOS, но не работал в Android.

Вот как я решил проблему.

Здесь действуют два независимых вопроса. Допустим, мы получили imageUri из средства выбора изображений, а затем использовали следующие строки кода для загрузки из внешнего интерфейса.

const formData = new FormData();
formData.append('image', {
 uri : imageUri,
 type: "image",
 name: imageUri.split("/").pop()
});

Первая проблема связана с самим imageUri. Если, скажем, путь к фото - /user/.../path/to/file.jpg. Тогда средство выбора файлов в Android даст значение imageUri как file:/user/.../path/to/file.jpg, тогда как средство выбора файлов в iOS даст значение imageUri как file:///user/.../path/to/file.jpg.

Решение первой проблемы - использовать file:// вместо file: в formData в android.

Вторая проблема заключается в том, что мы не используем правильный mime-тип. Он отлично работает на iOS, но не на Android. Что еще хуже, так это то, что пакет выбора файлов указывает тип файла как изображение, а не правильный тип mime.

Решение состоит в том, чтобы использовать правильный mime-тип в formData в поле type. Пример: MIME-тип для .jpg файла будет image/jpeg, а для .png файла будет image/png. Нам не нужно делать это вручную. Вместо этого вы можете использовать очень известный пакет npm под названием mime.

Окончательное рабочее решение:

import mime from "mime";

const newImageUri =  "file:///" + imageUri.split("file:/").join("");

const formData = new FormData();
formData.append('image', {
 uri : newImageUri,
 type: mime.getType(newImageUri),
 name: newImageUri.split("/").pop()
});
person SaiKumar Immadi    schedule 30.06.2020
comment
Огромное спасибо! Это сделал мим! Мне удалось заставить это работать, не меняя uri Android на file: //. Может быть, это потому, что мои formData были для file, а не для image? Тем не менее, спасибо за помощь. - person Nison M; 03.05.2021

arrow_upward
1
arrow_downward

Это проблема с флиппером. Обновите версию флиппера в gradle.properties до 0.43.0+, и она будет исправлена.

person Sjonchhe    schedule 06.07.2020

arrow_upward
1
arrow_downward

измените эту строку: form_data.append ('image', data);

To form_data.append ('изображение', JSON.stringify (данные));

где данные взяты из средства выбора изображений.

из https://github.com/react-native-image-picker/react-native-image-picker/issues/798

Вам нужно добавить этот uesCleartextTraffic = true в файл AndroidManifest.xml, находящийся внутри каталога android / app / src / main / AndroidManifest.xml.

‹Application ... android: usesCleartextTraffic = true› Затем, из-за проблемы с Flipper Network.

Я прокомментировал initializeFlipper (this, getReactNativeHost (). GetReactInstanceManager ())

в этом файле /android/app/src/main/java/com/{your_project}/MainApplication.java

Кроме того, комментируя строку номер 43 в этом файле android / app / src / debug / java / com / ** / ReactNativeFlipper.java

line43: builder.addNetworkInterceptor (новый FlipperOkhttpInterceptor (networkFlipperPlugin));

person olaleye olabanjo    schedule 27.05.2021