React Native使用react-native-image-picker选取图片转base64的方法

你当前使用的react-native-image-picker库原生支持返回base64格式的图片数据，不需要额外安装其他依赖库，只需调整调用参数即可获取base64编码内容，具体修改方法如下：

修改步骤 #

• 调用相机/相册选择方法时，新增配置对象作为第一个参数，开启includeBase64参数
• 选择图片后，回调返回的data.assets[0].base64字段即为图片的base64编码内容
• 上传至Firebase Storage时，需要为base64内容补全数据头，拼接规则为data:image/jpeg;base64, + 你获取到的base64字符串

修改后的完整代码 #

import React, {useState} from 'react';
import {View, TouchableOpacity, Text, StyleSheet, Image} from 'react-native';

import ImagePicker from 'react-native-image-picker';

// 图片选择器通用配置
const pickerOptions = {
  mediaType: 'photo',
  includeBase64: true, // 开启返回base64的开关
  quality: 0.8, // 可自定义调整图片质量，降低base64体积
};

export default function Upload() {
  const [avatar, setAvatar] = useState();
  const [avatarBase64, setAvatarBase64] = useState(''); // 存储base64内容用于上传

  function imagePickerCallback(data) {
    if (data.didCancel) {
      return;
    }

    if (data.error) {
      return;
    }

    if (data.customButton) {
      return;
    }

    const asset = data.assets[0];
    if (!asset.uri) {
      return;
    }

    setAvatar(asset);
    setAvatarBase64(asset.base64); // 存储返回的base64内容
  }

  // 上传到Firebase Storage的示例方法
  const uploadToFirebase = async () => {
    if (!avatarBase64) return;
    // 补全base64数据头
    const base64Data = `data:image/jpeg;base64,${avatarBase64}`;
    // 此处调用Firebase Storage的上传方法，将base64Data作为内容上传即可
  };

  return (
    <View style={styles.container}>
      <Image
        source={{
          uri: avatar
            ? avatar.uri
            : 'https://mltmpgeox6sf.i.optimole.com/w:761/h:720/q:auto/https://redbanksmilesnj.com/wp-content/uploads/2015/11/man-avatar-placeholder.png',
        }}
        style={styles.avatar}
      />
      <TouchableOpacity
        style={styles.button}
        onPress={() =>
          ImagePicker.launchCamera(pickerOptions, imagePickerCallback)
        }>
        <Text style={styles.buttonText}>camera</Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={styles.button}
        onPress={() =>
          ImagePicker.launchImageLibrary(pickerOptions, imagePickerCallback)
        }>
        <Text style={styles.buttonText}>galery</Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={styles.button}
        onPress={uploadToFirebase}
      >
        <Text style={styles.buttonText}>上传到Firebase</Text>
      </TouchableOpacity>

    </View>
  );
}

注意事项 #

base64编码会比原图片二进制体积大33%左右，如果是上传大体积图片，更推荐直接使用图片本地uri上传到Firebase Storage，避免base64过大导致请求异常。

内容的提问来源于stack exchange，提问作者Paloma Faria