反应本机上传图像Axios

时间:2020-06-12 10:58:18

标签: react-native axios fetch

我正在尝试将照片上传到网络服务器(php页面)上。我在Reactjs中做到了。一切对我来说都很完美。我正在尝试使用expo-image-picker在React native中复制它:

try {

                            var uploadUri = this.state.image;
                            var base_url = 'https://........./uploadImage.php';
                            var fd = new FormData();
                            fd.append('avatar', this.state.image, 'avatar.jpg');
                            axios.post(base_url, fd).then((res) => {
                                console.log(res);
                                if (res.data.status === 'success') {
                                    // finally image uploaded.....
                                    let fileConstruct =
                                        'https://...........net/' +
                                        res.data.fileName +
                                        '?fit=crop&w=840&q=80';

                                    this.setState({
                                        photoUrl: fileConstruct,
                                    });
                                } else {
                                    // there was an error with file upload... revert to default...
                                    this.setState({
                                        photoUrl:
                                            'https://........../avatar.jpg?fit=crop&w=840&q=80',
                                    });
                                    console.log(
                                        'No error but no image either......' + this.state.photoUrl
                                    );
                                }
                            });
                        } catch (err) { 

完全相同的代码在Reactjs中工作得很好...我从PHP中得到错误,因为它不是文件...。

我尝试过以下方法:

try {
                            // set the url
                            var uploadUri = this.state.image;
                            let base_url = 'https://........./uploadImage.php';
                            let body = new FormData();
                            //Appending file to body
                            body.append('avatar', {
                                uri: uploadUri,
                                type: 'image/jpeg', 
                                name: 'avatar.jpg', 
                            });
                            //Service call
                            fetch(base_url, {
                                method: 'POST',
                                headers: new Headers({
                                    'Content-Type': 'application/x-www-form-urlencoded',
                                }),
                                body: body,
                            })
                                .then((res) => res.json())
                                .then((responseJson) => {
                                    if (responseJson.status === 'success') {
                                        let fileConstruct =
                                            'https://............net/' +
                                            responseJson.fileName +
                                            '?fit=crop&w=840&q=80';

                                        this.setState({
                                            photoUrl: fileConstruct,
                                        });
                                    } else {
                                        // there was an error with file upload... revert to default...
                                        this.setState({
                                            photoUrl:
                                                'https://..............net/avatar.jpg?fit=crop&w=840&q=80',
                                        });
                                    }
                                })
                                .catch((error) => {
                                    //ERROR
                                    console.log(
                                        'ERROR from uploading image to PHP....' +
                                            JSON.stringify(error)
                                    );
                                    // there was an error with file upload... revert to default...
                                    this.setState({
                                        photoUrl:
                                            'https://............net/avatar.jpg?fit=crop&w=840&q=80',
                                    });
                                });
                        } catch (err) {
                            //console.error(err);

现在,此文件正在IOS Simulator上上传,但不能在Android Simulator上上传。

首先,我认为它与图片选择器有关……但是为什么它可以与提取器一起使用……

请注意,在Reactjs中,我使用的是简单的

谢谢!

0 个答案:

没有答案