React Native中MP3文件上传至服务器失败求助

问题场景 #

使用以下代码上传MP3音频文件时触发TypeError: Network request failed错误，但将文件信息修改为图片（JPG格式）即可正常上传。已确认音频文件URI正确，且尝试过audio/mpeg和audio/mp3两种MIME类型，均无法解决问题。

上传MP3的代码：

export async function uploadFile(fileUri) {
  const url = //my url;
  var token;
  await AsyncStorage.getItem('access_token').then((res) => {
    token = res;
  });
  let data = new FormData();

  data.append('file', {
    uri: fileUri,
    name: 'test.mp3',
    type: 'audio/mpeg',
  });
  return fetch(url, {
    method: 'POST',
    headers: {
      Authorization: 'Bearer ' + token,
      'Content-Type': 'multipart/form-data',
    },
    body: data,
  })
    .then((response) => response.json())
    .catch((error) => console.error(error));
}

正常工作的图片上传代码片段：

data.append('file', {
    uri: fileUri,
    name: 'test.jpg',
    type: 'image/jpeg',
  });

解决方案 #

• 移除手动设置的Content-Type头
  使用FormData时，运行环境（浏览器/React Native）会自动生成包含boundary的multipart/form-data请求头，手动设置会覆盖该头，导致服务器无法正确解析请求。修改后的请求配置：

  return fetch(url, {
    method: 'POST',
    headers: {
      Authorization: 'Bearer ' + token,
      // 移除'Content-Type': 'multipart/form-data'
    },
    body: data,
  })
  

• 检查React Native平台的URI兼容性
  若在React Native环境中，Android和iOS的文件URI格式存在差异：

  • Android的content://开头URI需要转换为真实文件路径，可使用react-native-fs库处理：

    import RNFS from 'react-native-fs';
    import { Platform } from 'react-native';
    
    if (Platform.OS === 'android' && fileUri.startsWith('content://')) {
      // 转换content URI为真实路径
      const realPath = await RNFS.stat(fileUri).then(stat => stat.path);
      data.append('file', {
        uri: realPath,
        name: 'test.mp3',
        type: 'audio/mpeg',
      });
    }
    

• 验证服务器端文件大小限制
  MP3文件通常比图片体积大，可能触发服务器的上传大小限制。检查服务器配置：

  • Nginx：修改client_max_body_size参数
  • 后端框架（如Node.js/Express）：调整multer等中间件的文件大小限制

• 添加详细错误日志排查
  在catch块中补充日志，确认token有效性、文件是否存在：

  .catch((error) => {
    console.error('上传错误详情:', error);
    console.log('当前Token:', token);
    console.log('文件URI:', fileUri);
    // 检查文件是否存在（React Native环境）
    RNFS.exists(fileUri).then(exists => console.log('文件存在:', exists));
  });
  

• 确保文件名与MIME类型一致
  保持文件名后缀和type字段匹配，例如name: 'test.mp3'对应type: 'audio/mpeg'，避免服务器因格式不匹配拒绝请求。

内容的提问来源于stack exchange，提问作者colder programmer