如何使用React Native从文件系统中检索文件，以转换为base64并将http发布为JSON？

Question

我使用的是本文中的react原生模板。这些代码都可以在Github上找到。

您可以使用该应用程序录制音频并保存到文件系统。我弄清楚了如何检索文件URI，但我发现无法获取文件本身的实际内容。我想做的就是以二进制或ascii或十六进制字符串或其他形式检索实际文件内容（它是一个. m4a文件），因此我可以将其转换为base 64编码，然后将其作为JSON发布到我的服务器。这是我的代码的样子：

/src/screens/RecordAudioScreen/RecordAudioScreenContainer.js

onEndRecording: props => async () => {
  try {
    // here is the URI
    console.log("HERE IS THE URI!!");
    const audio_data = "URI: " + props.recording._uri;

    // Help needed here
    // retrieve file contents from the Android/iOS file system
    // Encode as base64
    audio_data = ... // ???????

    // this works already, posts to the server
    fetch("https://myserver.com/accept_file",
    {
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        method: "POST",
        body: JSON.stringify({user_id: 1, audio_data: audio_data})
    })
    .then(function(res){ console.log(res) })
    .catch(function(res){ console.log(res) });
    console.log("FINISHED POST REQUEST!!!")

    await props.recording.stopAndUnloadAsync();
    await props.setAudioMode({ allowsRecordingIOS: false });

  } catch (error) {
    console.log(error); // eslint-disable-line
  }

  if (props.recording) {
    const fileUrl = props.recording.getURI();
    props.recording.setOnRecordingStatusUpdate(null);
    props.setState({ recording: null, fileUrl });
  }
},

我已经尝试了很多东西，但都没有成功。理想情况下，我只是从文件系统中获取文件内容，转换成base64，然后用这种方法将其全部发布到javascript中，但在基于应用程序的框架中，这似乎很难做到这一点。

这里有一些关于React Native Fetch Blob的堆栈溢出问题，我无法解决这些问题Fetch Blob 1 Fetch Blob 2

我曾尝试使用React Native Fs，但我无法正确加载它，在尝试弹出应用程序后，我陷入了无法理解的困境。如果可能的话，我更喜欢纯天然溶液。

我还尝试了一些使用FormData的代码，但也无法实现。

也许答案有点像这个关于从firebase检索图像的问题？我不知道，这是我第一次尝试做任何反应。

这也可能与生成的URI中的“file://”前缀有关，因为有很多问题在讨论删除它（仅适用于Android，或仅适用于iOS，我不太清楚）。

转换为base64将通过以下方式完成，但我首先需要实际的文件内容：

非常感谢您的帮助。

Answer 1

前段时间我写了一个录音语音应用程序的简单示例。

要获取我使用此方法的文件：

  import RNFS from 'react-native-fs';

  (...)

  getFiles() {
    RNFS.readDir(AudioUtils.DocumentDirectoryPath)
    .then((result) => {
       this.setState({recordedFiles: result});
       return Promise.all([RNFS.stat(result[0].path), result[0].path]);
    })
    .catch((err) => {
      console.log(err.message, err.code);
    });
  }

效果很好。

下面是完整的示例https://github.com/soutot/react-native-voice-record-app

如果有帮助，请告诉我。否则我们可以尝试另一种方法