【问题标题】：Ask to choose Audio file in React Native?要求在 React Native 中选择音频文件？
【发布时间】：2020-02-18 09:21:15
【问题描述】：

我有将歌曲上传到我们 API 的应用，

但我找不到一个图书馆，就像RN-image-picker 询问用户他想选择哪张照片，

除了文件“特别是音频”之外，还有什么类似的东西

我正在尝试 react-native-fs 并使用他在 README 中提供的示例代码 sn-p 但是当我调用它时，我在日志中得到了一个函数

chooseFile = () => {
    RNFS.readDir(RNFS.DocumentDirectoryPath)
      .then(result => {
        console.log('GOT RESULT', result); // here i got functions as result
        // stat the first file
        return Promise.all([RNFS.stat(result[0].path), result[0].path]);
      })
      .then(statResult => {
        if (statResult[0].isFile()) {
          // if we have a file, read it
          return RNFS.readFile(statResult[1], 'utf8');
        }

        return 'no file';
      })
      .then(contents => {
        // log the file contents
        console.log(contents);
      })
      .catch(err => {
        console.log(err.message, err.code);
      });
  };

编辑

在我使用@Tuan Luong 提到的react-native-document-picker 并编写一些函数以使用Axios 将此文件发送到端点后，我得到了这个错误，

 Possible Unhandled Promise Rejection (id: 0):
Error: Network Error

代码

chooseFile = async () => {
    // Pick a single file
    try {
      const res = await DocumentPicker.pick({
        type: [DocumentPicker.types.audio],
      });
      let sound_uri = res.uri;
      let type = res.type;
      this.setState({
        sound_uri,
        type,
      });
    } catch (err) {
      if (DocumentPicker.isCancel(err)) {
        // User cancelled the picker, exit any dialogs or menus and move on
      } else {
        throw err;
      }
    }
  };

  sendDatet = async value => {
    const {type, sound_uri, avatar} = this.state;

    console.log(avatar, type, sound_uri, value.songName, value.generes_id);
     // Logs 
     {/*
       // avatar => file:///storage/emulated/0/Android/data/com.music/files/Pictures/image7a.jpg
      // type => audio/mpeg
      // sound_uri => content://com.android.providers.media.documents/document/audio%3A1530
     // value.songName => Test song 
     // value.generes_id => 4
    */}
    let USER_TOKEN ='*****';
    let AuthStr = `Bearer ${USER_TOKEN}`;
    const headers = {
      'Content-Type': 'application/json',
      Authorization: AuthStr,
    };
    const formData = new FormData();
    formData.append('sounds', {sound_uri, type: type, name: value.songName});
    formData.append('avatar', {
      uri: this.state.avatar,
      type: 'image/jpeg',
      name: 'image-anas.jpg',
    });
    formData.append('name', value.songName);
    formData.append('generes_id', value.generes_id);

    let response = await API.post('/upload_sound_post', formData, {
      headers: headers,
    });

    console.log(response);
  };

【问题讨论】：

嘿！你试过这个库吗？ -> npmjs.com/package/react-native-get-music-files
你可以试试 react-native-document-picker github.com/Elyx0/react-native-document-picker
不，因为我在 Github 上没有看到它，而且它不是最新的 :) @AkilaDevinda
我会的，如果我使用 RN 0.61.5+，我应该遵循 Android/Ios 设置吗？ @团龙
支持自动链接。所以你不需要手动设置。 pod install 没问题

标签： javascript reactjs react-native expo

【解决方案1】：

您正在向服务器发送一个 BLOB 对象，而不是常规的 JSON 格式。因此，您应该更新标头类型以反映已发送多部分有效负载。

const headers = {
     'Content-Type': 'multipart/form-data',
     Authorization: AuthStr,
 };

【讨论】：