Android: сбой сетевого запроса при попытке загрузить изображение с помощью fetch - PullRequest
Новая
       3

Android: сбой сетевого запроса при попытке загрузить изображение с помощью fetch

2 голосов
/ 17 марта 2020

Я пытаюсь загрузить изображение из хранилища в спокойный API, но продолжаю получать «Сетевой запрос не выполнен» на Android (что означает, что запрос не проходит даже go), не проверен на iOS потому что мне пока не нужна эта часть. API уже работает и был протестирован с Почтальоном.

Код React Native: 

  body.append('vehicles',{ 
    resource_id: 2,
    resource: 'vehicles',
    cat_file_id: fileId,
    active: 1,
    vehicles: photo, //<- photo value below
    name: 'vehicles',
    type: 'image/jpeg'
  })

  fetch(`${BASE_URL}/files`, {
    method: 'POST',
    headers: {
      'Content-Type': 'multipart/form-data',
      Accept: "*/*",
      Authorization: 'Bearer '+auth
    },
    body: body

  }).then(response => response.json())
  .then(response => {
    console.log('IMAGE RESPONSE', response)
  })
  .catch(error => console.log('ERROR', error))

Значение фотографии выглядит как file:///storage/emulated/0/DCIM/...

Ответ: 

ERROR TypeError: Network request failed
at XMLHttpRequest.xhr.onerror (fetch.umd.js:473)
at XMLHttpRequest.dispatchEvent (event-target-shim.js:818)
at XMLHttpRequest.setReadyState (XMLHttpRequest.js:574)
at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:388)
at XMLHttpRequest.js:501
at RCTDeviceEventEmitter.emit (EventEmitter.js:189)
at MessageQueue.__callFunction (MessageQueue.js:436)
at MessageQueue.js:111
at MessageQueue.__guard (MessageQueue.js:384)
at MessageQueue.callFunctionReturnFlushedQueue (MessageQueue.js:110)

На Почтальоне запрос выглядит примерно так:

Headers

Body

Уже пробовал:

  • Удаление заголовка Accept
  • Изменение значения Accept на 'application / json'
  • Удаление file:// из URL-адреса изображения
  • Добавлено android:usesCleartextTraffic="true" в манифест

Уже проверено:

  • Нет значений, равных нулю или undefined
  • Работает соединение inte rnet, все остальные сетевые запросы в приложении работают нормально
  • Идентификатор правильный

React Native версия 0.61.5

Ответы [ 2 ]

0 голосов
/ 19 марта 2020

Какой у вас сервер fetch( $ {BASE_URL} / files`. Обычно это происходит при попытке подключиться к API бэкэнда на компьютере localhost. Даже если вы используете IP-адрес localhost, он все равно сохраняется, поэтому лучше использовать онлайн-сервер для тестирования или просто использовать ngrok (https://ngrok.com/), чтобы обслуживать ваш внутренний сервер с помощью inte rnet.

0 голосов
/ 18 марта 2020

Я нашел одну недостающую строку в вашем коде let formData = new FormData();. но не уверен, что именно здесь проблема. Кстати, вот пример рабочего кода из одного из моих проектов, и я настроил его в соответствии с вашим контекстом.

  1. Добавьте вашу аутентификацию

  2. замените ImageURI изображением путь и URL_SAVE_IMAGE конечная точка URL 

    const newImage = {
    resource_id: 2,
    resource: 'vehicles',
    cat_file_id: 1,
    active: 1,
    vehicles: ImageURI,
    name: "my_photo.jpg",
    type: "image/jpg",
};

let formData = new FormData();
formData.append("vehicles", newImage);

return fetch(URL_SAVE_IMAGE, {
    method: 'POST',
    headers: {
        "Content-Type": "multipart/form-data"
    },
    body: formData
}).then(response => response.json());

это должно работать!

...