Ax ios POST-запрос выдает «Ошибка сети» при добавлении изображения в структуру FormData в React Native - PullRequest
Новая
       77

Ax ios POST-запрос выдает «Ошибка сети» при добавлении изображения в структуру FormData в React Native

1 голос
/ 04 мая 2020

В настоящее время я создаю простое приложение в React Native 0.62.2 для Android. У меня были некоторые проблемы с axios 0.19.2 (или даже fetch API) при попытке загрузить изображения в мой API (который написан на node.js / express). Запрос POST формулируется следующим образом: 

// UserService.js
export const postNewUser = async (newUser) => {
    try {
        const photo = {
            uri: newUser.avatar.uri,
            type: 'image/jpg',
            name: newUser.avatar.fileName,
        };
        const formData = new FormData();
        Object.keys(newUser).forEach(key => formData.append(key, newUser[key]));
        formData.append('avatar', photo);
        const response = await api.post('/users', formData);

        return response.data;
    } catch (err) {
        console.log('TRACE error posting user: ', err);
        return;
    }
}

Здесь свойство newUser.avatar.uri задается с помощью библиотеки средства выбора изображений, а именно @react-native-image-picker 1.6.1. Это дает мне NetworkError всякий раз, когда я добавляю переменную photo в FormData. Установка URI вручную с произвольным изображением из Интернета приводит к той же ошибке. Отлаживая его из браузера, он выводит какую-то трассировку стека, такую ​​как эта: 

TRACE error posting user:  Error: Network Error
    at createError (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\axios\lib\core\createError.js:16)
    at EventTarget.handleError (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\axios\lib\adapters\xhr.js:83)
    at EventTarget.dispatchEvent (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\event-target-shim\dist\event-target-shim.js:818)
    at EventTarget.setReadyState (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:575)
    at EventTarget.__didCompleteResponse (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:389)
    at C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:502
    at RCTDeviceEventEmitter.emit (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:189)
    at MessageQueue.__callFunction (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:425)
    at C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112
    at MessageQueue.__guard (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:373)

Если я, например, закомментирую строку formData.append('avatar', photo);, она работает отлично, т.е. мой API получает запросить соответственно. Так что я думаю, что это не может быть связано с CORS. Кроме того, другие запросы, такие как GET и даже другие POST, работают просто отлично.

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

Если кто-то захочет проверить, как реализованы маршруты в моем API, просто поразите меня, и я приведу здесь код.

Заранее спасибо за любую помощь, которую вы можете мне дать!

1 Ответ

0 голосов
/ 05 мая 2020

У меня та же проблема, с использованием formData, но без загрузки файла он работает просто отлично. Я провел много исследований, и обнаружил старую проблему , которая до сих пор остается активной в реагирующем нативном репо. Предлагаемое решение заключается в использовании библиотеки rn-fetch-blob , но я не могу реализовать ее в своем проекте. Пожалуйста, поделитесь своей работой, пожалуйста.

...