Как загрузить изображение в React Native

Question

Я пытаюсь загрузить изображение, но мне не удалось, потому что я новичок в React Native. На самом деле, я хочу выбрать фотографию, затем загрузить ее на свой сервер, из приложения она не работает. когда я даю попробовать от почтальона это работает В почтальоне я выбираю form-data, в ключе я выбираю тип file, когда я нажимаю на кнопку отправки, тогда изображение успешно загружается, но когда я пробую его из приложения, оно не работает. Может кто-нибудь, пожалуйста, помогите мне, как достичь моей цели.

код

 _pickImage = async () => {

        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            quality: 1,
            allowsMultipleSelection: true,
            base64: true,
        });
        let pickerResult = await ImagePicker.launchImageLibraryAsync();

        if (!result.cancelled) {
            console.log('iff')
            ext = result.uri.split('.').pop()
            this.setState(prevState => ({
                images: [...prevState.images, `data:image/${ext};base64,` + result.base64],
                imageView: true
            })
            )

            axios.post(`${apiUrl}/api/cloud/image`,{image:pickerResult})
            .then(res=> {
                console.log('@@@@@@ response',res.data)
            })
            .catch(error=> {
                console.log('@@@@@@ error reponse',error.response.data)
            })

            // console.log('fffe', this.state.images)
            // this.props.dispatch(uploadImage(this.state.images))
        } else {
            console.log('else')
        }
    };

Answer 1

Обновление: Теперь проблема в том, что размер отправляемого файла слишком велик. Поэтому я предлагаю вам не выбирать MultiImage, а сначала снижать качество.

Итак, я немного изменяю код:

_pickImage = async () => {

    let result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        quality: 0.1,
        allowsMultipleSelection: false,
        base64: true,
    });

    if (!result.cancelled) {
        let fd = new FormData()
        fd.append('imageKey',result.uri); /// file refer to result.uri
        axios({
            method: 'post',
            url: `${apiUrl}/api/cloud/image`,
            data: fd,
        })
        .then(res=> {
            console.log('@@@@@@ response',res.data)
        })
        .catch(error=> {
            console.log('@@@@@@ error reponse',error.response.data)
        })

        // console.log('fffe', this.state.images)
        // this.props.dispatch(uploadImage(this.state.images))
    } else {
        console.log('else')
    }
}

Ссылка на решение: ax ios отправить запрос на отправку данных формы .

Попробуйте данные формы:

_pickImage = async () => {

    let result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.All,
        quality: 1,
        allowsMultipleSelection: true,
        base64: true,
    });

    let pickerResult = await ImagePicker.launchImageLibraryAsync();

    /////////  assume that pickerResult return image file......

    if (!result.cancelled) {
        console.log('iff')
        ext = result.uri.split('.').pop()
        this.setState(prevState => ({
            images: [...prevState.images, `data:image/${ext};base64,` + result.base64],
            imageView: true
        })
        )
        let fd = new FormData()
        fd.append('imageKey',pickerResult);

        axios({
            method: 'post',
            url: `${apiUrl}/api/cloud/image`,
            data: fd,
        })
        .then(res=> {
            console.log('@@@@@@ response',res.data)
        })
        .catch(error=> {
            console.log('@@@@@@ error reponse',error.response.data)
        })

        // console.log('fffe', this.state.images)
        // this.props.dispatch(uploadImage(this.state.images))
    } else {
        console.log('else')
    }
}