React-Native Загрузить изображение с помощью Fetch - PullRequest
Новая
       5

React-Native Загрузить изображение с помощью Fetch

0 голосов
/ 25 сентября 2018

Я пытаюсь отправить / загрузить файл изображения на свой внутренний сервер с использованием fetch в реагирующем, но я не могу достичь чего-либо, даже если я пробовал разные примеры.Мой бэкэнд - php / laravel.Я использую Средство выбора изображений в реагирующе-нативном, оно работает нормально.

Сначала я получаю изображение из библиотеки, как это; 

pick(){
        ImagePicker.showImagePicker(options, (response) => {
            console.log('Response = ', response);

            if (response.didCancel) {
                console.log('User cancelled image picker');
            }
            else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            }
            else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            }
            else {
                let source = { uri: response };

                // You can also display the image using data:
                // let source = { uri: 'data:image/jpeg;base64,' + response.data };

                this.uploadImage(response)
            }
        });
    }

console.log выбранного изображения; 

{height: 332, width: 443, type: null, fileName: "YnVocPlX7yKpxrUczoySYLkKhuChMhAaIzvHlezj2VZIgwVxND…SBaBiCCszMjVNAtyy1gWQbQl6AIF7ZQ=w443-h332-nc.jpeg", fileSize: 39718, …}
data: "/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAMCAgoKCgoKCgoKCg"
fileName: "YnVocPlX7yKpxrUczoySYLkKhuChMhAaIzvHlezj2VZIgwVxNDwwSTxrKpIW6OydrR5Ll-LzH5pzqDYCJA3l5JySBaBiCCszMjVNAtyy1gWQbQl6AIF7ZQ=w443-h332-nc.jpeg"
fileSize: 39718
height: 332
isVertical: true
originalRotation: 0
path: "/storage/emulated/0/Download/YnVocPlX7yKpxrUczoySYLkKhuChMhAaIzvHlezj2VZIgwVxNDwwSTxrKpIW6OydrR5Ll-LzH5pzqDYCJA3l5JySBaBiCCszMjVNAtyy1gWQbQl6AIF7ZQ=w443-h332-nc.jpeg"
type: null
uri: "content://media/external/images/media/22"
width: 443
__proto__: Object

Затем я пытаюсь загрузить; 

uploadImage(source){

        const data = new FormData();
        data.append('name', 'testName'); // you can append anyone.
        data.append('photo', {
            uri: source.uri,
            type: 'image/jpeg', // or photo.type
            name: 'testPhotoName'
        });

        fetch('https://xxx/react_image', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'multipart/form-data',
            },
            body: data,
        }).then((response) => response.json())
            .then((responseJson) => {

               console.log(responseJson);

            }).catch((error) => {
            //
        });
    }

, и я получаю ответ и вижу его в консоли от моего внутреннего сервера; 

{name: "testName", photo: {…}}
name: "testName"
photo: {}
__proto__: Object

и, как вы видите, имя в порядке, то же самоекак я отправил но фото это пустой объект ??Я не знаю, что мне с этим делать (на внутреннем сервере я просто отправляю запрос как: return $ request;).

1 Ответ

0 голосов
/ 25 сентября 2018

Я думаю, что проблема может быть в том, что вы предоставляете изображение URI, я предлагаю попробовать с base64.Вы можете преобразовать URI в base64 следующим образом: https://facebook.github.io/react-native/docs/imagestore#getbase64fortag

И вот рабочий пример, который использует XMLHttpRequest, который может быть альтернативой для fetch, который вы используете: 

ImageStore.getBase64ForTag(source.uri, (base64Data) => {
    var xhr = new XMLHttpRequest();
    var fd = new FormData();
    xhr.open('POST', url, true);
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    xhr.onreadystatechange = (e) => {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            resolve();
        }
    };

    fd.append('file', base64Data);
    xhr.send(fd);
});

Просто попробуйте.

...