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

Question

我正在使用 this article 中的 React Native 模板.代码均可在Github上获取here .

您可以使用该应用程序录制音频并保存到文件系统。我想出了如何检索文件 URI，但我发现无法获取文件本身的实际内容。我想要做的就是以二进制或 ascii 或十六进制字符串或其他形式检索实际文件内容(它是 .m4a 文件)，因此我可以将其转换为 base64 编码，然后将其作为 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 ，但我无法让它正确加载，在尝试弹出应用程序后，我陷入了我不明白的东西中。如果可能的话，我更喜欢简单的 React Native 解决方案。

我还尝试了一些使用 FormData 的代码，但也无法使其工作。

也许答案有点像 this question about retrieving images from firebase ？我不知道，这是我第一次尝试在 React 中做任何事情。

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

转换为base64将通过something like this完成，但我首先需要实际的文件内容:

非常感谢任何帮助。

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

如果有帮助，请告诉我。否则我们可以尝试不同的方法