如何在 React Native 中上传图片

Question

I am trying to upload an image but I am failed because I am new to React Native . Actually, I want to select a photo then upload it to my server , from app it not working . when I give it try from postman it working . In postman I select form-data , In key I selected type as file when I hit on submit then image is successfully uploaded but when I try it from app it not working . Could someone please help me how to achieve my goal.

code

 _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

Update: Now the problem is that the size of sent file too large. Therefore, I suggest that you should choose not to selectMultiImage, and low down the quality first.

So, I change the code a little bit:

_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')
    }
}

Solution reference : axios post request to send form data .

Try form-data：

_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')
    }
}