react native基于expo上传图片组件expo-image-picker的使用

app中，需要新增一个用户上传图片功能，由于app项目基于expo搭建的，所以直接使用expo中的组件。

第一步：下载expo-image-picker

yarn add expo-image-picker

第二步：在对应的文件中导入

import * as ImagePicker from 'expo-image-picker';

第三步：上传方法（我这里用伪代码描述）

import React, { useState, useEffect } from 'react';
import { View, Button, Image } from 'react-native';
import * as ImagePicker from 'expo-image-picker';

export default function App() {
  const [selectedImage, setSelectedImage] = useState(null);

  const openImagePicker = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
        allowsEditing: true, // 图片是否可编辑
        quality: 0,
        mediaTypes:ImagePicker.MediaTypeOptions.Images, //打开相册
    });

    if (!result.cancelled) {
        console.log(result,'result');
        setSelectedImage(result.uri);
        //在这里进行与后端对接操作，一般来说这里需要组装一下数据传给后端。
        //打印的数据如下图
    }else{
        console.log('已取消上传')
    }
  };

  return (
    <View>
      <Button title="上传图片" onPress={openImagePicker} />
    </View>
  );
}

上传图片成功后的回调结果

 拿到assets后，组装成你想要的数据，返给后端拿到图片id再接着实现后面的功能。

这里注意IOS和安卓下的区别，IOS正常打开相册，安卓打开的是文件管理器。