Dingdong_app/components/UpLoadImage.js

import React from "react";
import { Button, Layout, Icon } from "@ui-kitten/components";
import { useModel } from "flooks";
import { Linking } from "expo";
import * as ImagePicker from "expo-image-picker";
import { Image, Platform } from "react-native";
import * as FileSystem from "expo-file-system";

export default function UpLoadImage(props) {
    const { connect, removeTips } = useModel("wordsModel");
    const { httpPost } = useModel("httpModel", true);
    const { showDialog } = useModel("dialogModel", true);
    const renderPulseIcon = (props) => <Icon {...props} name='plus-outline' />;

    return (
        <>
            <Button
                style={[
                    props.style,
                    props.size ? { width: props.size, height: props.size } : {},
                ]}
                appearance='imageButton'
                onPress={() => {
                    _pickImage().then((img) => {
                        console.log(img);
                        httpPost("/upload/base64", {
                            base64: img,
                        }).then((res) => {
                            props.changeIcon(res);
                        });
                    });
                }}
                accessoryLeft={(imgprops) => {
                    if (props.value && props.value != " ") {
                        return (
                            <Image
                                style={{
                                    width: "100%",
                                    height: "100%",
                                }}
                                source={{ uri: props.value }}
                            />
                        );
                    } else {
                        return renderPulseIcon(imgprops);
                    }
                }}
            />
            {props.hasCancel && props.value && (
                <Button
                    size='tiny'
                    status='danger'
                    accessoryLeft={ForwardIcon}
                    appearance='imgButton'
                    style={{
                        position: "absolute",
                        right: -5,
                        top: -5,
                        borderRadius: 30,
                    }}
                    onPress={() => {
                        showDialog({
                            bodyText: removeTips,
                            status: "danger",
                            cancelable: true,
                            confirmCallback: () => {
                                props.delEvent();
                            },
                        });
                    }}
                />
            )}
        </>
    );
}
const ForwardIcon = (props) => <Icon {...props} name='minus' fill='#fff' />;

const getPermissionAsync = async () => {
    if (Constants.platform.ios) {
        const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
        if (status !== "granted") {
            alert("Sorry, we need camera roll permissions to make this work!");
        }
    }
};

const _pickImage = () => {
    console.log(Platform);
    return new Promise(async (resolve, reject) => {
        try {
            let permissionResult = await ImagePicker.requestCameraRollPermissionsAsync();

            if (permissionResult.granted === false) {
                reject("notAllod");
            } else {
                let result = await ImagePicker.launchImageLibraryAsync({
                    mediaTypes: ImagePicker.MediaTypeOptions.Images,
                    allowsEditing: true,
                    aspect: [1, 1],
                    quality: 1,
                    base64: true,
                });
                if (!result.cancelled) {
                    if (Platform.OS == "web") {
                        resolve(result.uri);
                    } else {
                        resolve(result.base64);
                    }
                }
            }
        } catch (e) {
            reject(e);
        }
    });
};