React-Native：将图片的URL转换为Base64字符串。

11 浏览
0 Comments

React-Native：将图片的URL转换为Base64字符串。

我正在构建一个React Native应用程序，需要以base64字符串格式存储图像以实现离线查看功能。

哪个库/函数能够给我提供将图像存储为base64字符串的最佳结果？假设我的URL是"http://www.example.com/image.png"。

另外，我需要在将其存储为字符串之前进行HTTP请求获取图像吗？按照我的逻辑是需要的，但在React Native中，你可以在组件中加载图像，而不需要从服务器首先请求它们。

在React Native中，最佳的选择是什么？

0

3 答案

0 Comments

问题的出现原因是需要将图像的URL转换为Base64字符串，但是上述提供的代码只适用于图像文件，不适用于PDF和其他文件。因此需要寻找其他解决方法。

解决方法是使用React Native的FileSystem模块，具体如下：

1. 首先，在项目中安装expo-file-system库。可以通过以下命令进行安装：

npm install expo-file-system

2. 然后，在代码中引入FileSystem：

import * as FileSystem from 'expo-file-system';

3. 使用以下代码将图像URL转换为Base64字符串：

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

通过以上步骤，可以将图像URL转换为Base64字符串。需要注意的是，这个方法只适用于图像文件，不适用于PDF和其他文件。

参考链接：

- [https://docs.expo.io/versions/latest/sdk/filesystem/](https://docs.expo.io/versions/latest/sdk/filesystem/)

- [https://github.com/expo/expo/tree/master/packages/expo-file-system](https://github.com/expo/expo/tree/master/packages/expo-file-system)

0
0 Comments

问题的原因是尝试将图像URL转换为base64字符串时，保存到变量中时保存为"[object Object]"而不是base64字符串。解决方法是使用react-native-fs库来读取图像文件并将其转换为base64字符串。以下是解决方法的具体步骤：

1. 首先需要安装react-native-fs库，如果尚未安装的话。可以通过此链接(https://github.com/itinance/react-native-fs)进行安装。

2. 在代码中导入react-native-fs库：

import RNFS from 'react-native-fs';

3. 使用RNFS的readFile方法来读取图像文件并将其转换为base64字符串：

RNFS.readFile(this.state.imagePath, 'base64')
.then(res => {
  console.log(res);
});

4. 完成以上步骤后，res变量将包含图像文件的base64字符串。

需要注意的是，此解决方法适用于React Native版本0.63.3。如果使用其他版本的React Native，可能需要进行相应的调整。

另外，文档中提到可以使用命令"react-native link react-native-fs"来自动将库添加到项目中，无需手动添加。但是文档中的Android使用说明可能需要更新。

0
0 Comments

问题：如何将图像URL转换为Base64字符串？

原因：使用react-native-fetch-blob库进行图像操作时，遇到了以下问题：代码会导致应用崩溃，出现FileUriExposedException异常；CocoaPods无法找到与React/Core兼容的版本。

解决方法：根据文档提供的示例代码，使用rn-fetch-blob库进行图像操作，并避免使用react-native-fetch-blob库的过时版本。以下是解决方法的代码示例：

import RNFetchBlob from "rn-fetch-blob";
const fs = RNFetchBlob.fs;
let imagePath = null;
RNFetchBlob.config({
  fileCache: true
})
  .fetch("GET", "http://www.example.com/image.png")
  .then(resp => {
    imagePath = resp.path();
    return resp.readFile("base64");
  })
  .then(base64Data => {
    console.log(base64Data);
    return fs.unlink(imagePath);
  });

此外，可以参考项目文档提供的示例代码，使用本地文件进行操作。详情请参阅项目文档中的链接：github.com/wkh237/react-native-fetch-blob/wiki/…

注意：react-native-fetch-blob库已不再维护，建议使用rn-fetch-blob库进行类似的操作。

0