ReactNative学习----9Fetch之post请求数据，上传图片

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/88567541

github地址：
https://github.com/react-native-community/react-native-image-picker

效果图：

使用步骤:
1cd 到项目目录下
yarn add react-native-image-picker
react-native link react-native-image-picker

2在android目录下在AndroidManifest文件中添加权限

    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

3复制文档代码，并使用fetch上传图片
ChoosePictureUpLoad.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, Image, Alert} from 'react-native';
import ImagePicker from 'react-native-image-picker';

/**
 * 从相机，或者相册中选择图片，并上传到服务器
 */
export default class ChoosePictureUpLoad extends Component {
    constructor(props) {
        super(props);
        this.state = {
            avatarSource: {},
        }
    }

    // 选择图片
    onClick = () => {
        this.myDialog();
    }
    // 上传图片
    onClickUpLoad = () => {
        this.httpUpLoad();
    }

    //上传图片和文字
    httpUpLoad = () => {
        // let url = 'http://127.0.0.1:4000/uploadimg';
        let url = 'http://47.100.202.184:4000/uploadimg';
        let uri = this.state.avatarSource.uri;

        let formData = new FormData();//如果需要上传多张图片,需要遍历数组,把图片的路径数组放入formData中
        //这里的key(uri和type和name)不能改变,
        // name: 'image.jpg'，是把你上传的图片转化成jpg格式
        let file = {uri: uri, type: 'multipart/form-data', name: 'image.jpg'};
        formData.append("username", "zhh1");
        formData.append("image", file);   //这里的files就是时后台需要的key

        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'multipart/form-data',
            },
            body: formData,
        })
            .then((response) => response.text())
            .then((responseData) => {
                console.warn(responseData);
            })
            .catch((error) => {
                console.error('error', error)
            });

    }

    //调用相机的弹出框
    myDialog = () => {
        const options = {
            title: '',
            cancelButtonTitle: '取消',
            takePhotoButtonTitle: '拍照',
            chooseFromLibraryButtonTitle: '选择照片',
            storageOptions: {
                skipBackup: true,
                path: 'images',
            }
        };
        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 {
                const source = {uri: response.uri};
                // You can also display the image using data:
                // const source = { uri: 'data:image/jpeg;base64,' + response.data };
                this.setState({
                    avatarSource: source,
                });
                console.warn(this.state.avatarSource.uri);
            }
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <Text
                    style={styles.instructions}
                    onPress={() => this.onClick()}
                >选择图片</Text>

                <Text
                    style={styles.instructions}
                    onPress={() => this.onClickUpLoad()}
                >上传</Text>


                <Image source={this.state.avatarSource} style={styles.uploadAvatar}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({

    container: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
        marginTop: 30,
    },
    instructions: {
        color: '#333333',
        marginTop: 30,
        backgroundColor: '#66CCFF',
        padding: 10,
        width: 100,
        height: 40,
    },
    uploadAvatar: {
        width: 100,
        height: 100,
    },


});

源码下载：
walldemo2----ChoosePictureUpLoad
https://download.csdn.net/download/zhaihaohao1/11022244