Question

我使用了react-native-image-picker，现在我从照片库中选择图像。要将图像发送到API，我必须先将其转换为base64，然后转换为字节数组。我在response.uri中有文件路径。我该怎么办？

当我做console.log（response）时，我得到的结果是

'Response ='，{fileSize：6581432，

经度：-17.548928333333333，

uri：'file：/// Users / shubhamb / Library / Developer / CoreSimulator / Devices / B58314DF-F0A9-48D2-B68A-984A02271B72 / data / Containers / Data / Application / 63143214-8A03-4AC8-A79C-42EC9B82E841 /tmp/2AACBC57-0C07-4C98-985E-154668E6A384.jpg'，

文件名：“ IMG_0003.JPG”，

纬度：65.682895，

origURL：'assets-library：//asset/asset.JPG？id = 9F983DBA-EC35-42B8-8773-B597CF782EDD＆ext = JPG'，

类型：“ image / jpeg”，

高度：2002，

宽度：3000，

时间戳：“ 2012-08-08T18：52：11Z”，

isVertical：false}

Answer 1

我在更新我的应用程序时突然遇到了这个问题。我发现以前的 react-native-image-picker 用于提供 base64 作为 response.data。但是现在 options 对象中有一个 includeBase64 以便您可以控制是否需要 base64 数据。所以我的代码变成了下面的样子

captureTradeLicenseImage() {
    let options = {
        maxHeight: 250,
        maxWidth: 350,
        includeBase64: true //add this in the option to include base64 value in the response
    }
    ImagePicker.launchCamera(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 if (response.fileSize > 5242880) {
            Alert.alert(
                "Nilamhut Say\'s",
                "Oops! the photos are too big. Max photo size is 4MB per photo. Please reduce the resolution or file size and retry",
                [
                    { text: "OK", onPress: () => console.log('ok Pressed') }
                ],
                { cancelable: false }
            )
        }
        else {
            this.setState({tradeLicenseImageData: response.base64}) //access like this
        }
    })
}

Answer 2

由于您使用的是 react-native-image-picker ，它已经在响应中返回了Base64值

ImagePicker.showImagePicker(options, (response) => {
  const base64Value = response.data;
});

Documentation for the response

Answer 3

独立的expo FileSystem软件包使此过程变得简单：

const base64 = await FileSystem.readAsStringAsync(photo.uri, { encoding: 'base64' });

自2019年9月27日起，此软件包可处理file://和content:// uri的

Answer 4

我为时已晚，但是如果我可以帮助其他人，他们正在寻找如何从图像中获取 base64 数据的方法：在 options 对象中，您必须将base64选项设置为 true ，如下所示：

const options = {
   title: 'Choose an Image',
   base64: true
};

ImagePicker.launchImageLibrary(options, response => {
    console.log(response.data);
});

在React Native中将Image转换为base64

4 个答案: