Блог

Главная - Вопросы по программированию - Получение сетевой ошибки при попытке отправить изображение на предварительно подписанный URL-адрес в React Native

Получение сетевой ошибки при попытке отправить изображение на предварительно подписанный URL-адрес в React Native

#react-native #axios #form-data

Вопрос:

В моем проекте react native мне нужно иметь возможность отправлять изображения с помощью axios в API. Для этого у меня есть следующая функция:

     export function SetImage(image, id, token)
    {
        const formData = new FormData();
        formData.append('file',{
        uri: image.uri,
        type: image.type,
        })

        return axios({
            method: 'PUT',
            url: axios.defaults.baseURL   "/api/SetImage/" ID,
            headers: {
                'Content-Type': 'multipart/form-data' ,
                'Authorization': 'Bearer: ' token,
            },
            data: formData
        })
    }

Image — это возвращаемый объект, который я получил из ImagePicker.launchImageLibraryAsync функции, которая выглядит примерно так:

     {
       "cancelled": false,
       "height": 2048,
       "type": "image",
       "uri": "file:///data/user/0/host.exp.exponent/cache/<PathtoSomewhere>/ImagePicker/1d408e33-b54a-4189- 
       ac66-bd86ec11069a.jpg",
       "width": 946,
      }

Однако, когда я пытаюсь использовать функцию, я получаю следующую ошибку, которая мне ничего не говорит:

     Network Error
    at node_modulesaxioslibcorecreateError.js:16:14 in createError
    at node_modulesaxioslibadaptersxhr.js:84:13 in handleError
    - ... 9 more stack frames from framework internals

Комментарии:

1. Вы пытались загрузить изображение в клиент REST (например, Postman , Insomnia и т. Д.) И убедиться, что все работает?

2. да, я протестировал его в Postman, и он там работает

Ответ №1:

Недавно мне пришлось добавить ту же функциональность в свой проект (загрузить изображение по предварительно подписанному URL-адресу). Это то, что работает для меня:

 const uploadImage = async ({ method, url, file }: any) => {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.setRequestHeader('Content-Type', file.type);
        xhr.onload = () => {
            if (xhr.status !== 200) {
                reject(
                    new Error(
                        `Request failed. Status: ${xhr.status}. Content: ${xhr.responseText
                        }`,
                    ),
                );
            }
            resolve(xhr.responseText);
        };
        xhr.send(file);
    });
};

// image === image inside local phone
export const uploadImageToUrl = async ({ image, url }: any) => {
    await uploadImage({
        method: 'PUT', url, file: {
            uri: image.uri,
            type: image.type,
        }
    });

    return { url };
};

Чтобы загрузить изображение, вам просто нужно вызвать его как:

 uploadImageToUrl({ url: your-upload-url, image: your-image-object-from-image-picker })

Примечание: передайте функции весь объект изображения (а не только uri)

Также добавьте эту строку, если необходимо:

 xhr.setRequestHeader('Authorization', 'Bearer '   jwtoken);
Метки: