Загрузите образ base64 на сервер с Axios и React native - PullRequest
Новая
       17

Загрузите образ base64 на сервер с Axios и React native

0 голосов
/ 29 ноября 2018

На самом деле у нас есть сайт, который использует dropzone.js для загрузки изображения на сервер.

Я работаю с собственным приложением реагирования, и мне нужно повторить поведение JS в Dropzone.

Я пытаюсь отправить изображение base64, но запрос возврата Multipart requests must contain at least one part.

 saveImages(images) {
    let config = {
        headers: {
            'Content-Type': 'multipart/form-data',
            'X-Requested-With': 'XMLHttpRequest'
        }
    };
    images.forEach(img => {
        let imgFormData = `data:${img.mime};base64,${(img.data)}`;
        let blob = this.dataURItoBlob(imgFormData);
        let formData = new FormData(document.forms[0]);
        formData.append('file', blob);
        axios.post(SAVE_IMAGE_URL, formData, config)
            .then(res => console.log(res))
            .catch(err => {
                console.log(err);
                console.log(err.status);
                console.log(err.code);
            })
    });
}

    dataURItoBlob = (dataURI) => {

        let byteString;
        if (dataURI.split(',')[0].indexOf('base64') >= 0)
            byteString = atob(dataURI.split(',')[1]);
        else
            byteString = unescape(dataURI.split(',')[1]);

        let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];


        let ia = new Uint8Array(byteString.length);
        for (let i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }

        return new Blob([ia], {type:mimeString});
}

1 Ответ

0 голосов
/ 30 ноября 2018

Исправлено с помощью пакета response-native-fetch-blob 

    images.forEach(img => {
        RNFetchBlob.fetch('POST', SAVE_IMAGE_URL, {
            'Content-Type': 'multipart/form-data'
        }, [
            // element with property `filename` will be transformed into `file` in form data
            {name: 'file', filename: 'file.png', data: img.data}
        ]).then((resp) => {
            console.log(resp);
            // ...
        }).catch((err) => {
            // ...
        })

    })
...