React Native音频上传Filestack时长为0问题求助

问题描述 #

在React Native中录制音频后上传至Filestack，上传完成后音频文件时长显示为0:00，无法正常播放。以下是相关代码及信息：

录制相关函数 #

async function handleRecordingStart() {
  const { granted } = await Audio.getPermissionsAsync();

  if (granted) {
    try {
      const { recording } = await Audio.Recording.createAsync({
        ...Audio.RecordingOptionsPresets.HIGH_QUALITY,
        outputFormat: ".mp3",
      });
      setRecording(recording);
    } catch (error) {
      console.log(error);
    }
  }
}

// 停止录制
async function handleRecordingStop() {
  try {
    if (recording) {
      await recording.stopAndUnloadAsync();
      const fileUri = await recording.getURI();
      setRecordingFileURI(fileUri);
      setRecording(null);
      const url = uploadFileAndGetURL(fileUri);
      console.log(url);
    }
  } catch (error) {
    console.log(error);
  }
}

上传函数（原代码） #

async function uploadFileAndGetURL() {
  console.log("Starting upload...");
  console.log("Local file uri:", recordingFileURI);
  try {
    if (recordingFileURI) {
      const response = await axios.post(
        `https://www.filestackapi.com/api/store/S3?key=${FILESTACKAPI}`,
        recordingFileURI,
        {
          headers: {
            "Content-Type": "audio/mp3", // 也尝试过设置为.m4a
          },
        }
      );
      if (response.status === 200) {
        console.log("Upload finished!");
        console.log("URL:", response.data.url);
        console.log("response for debug:", response);
        return response.data.url;
      }
    }
  } catch (error) {
    throw error;
  }
}

相关信息 #

• 本地文件示例URI：

file:///Users/name/Library/Developer/CoreSimulator/Devices/CD8A6DB/data/Containers/Data/Application/8F898/Library/Caches/ExponentExperienceData/%2540user%company/AV/recording-4BEC2B3B-60.m4a

• 已上传音频地址：cdn.filestackcontent.com/mXtu5A7RquwgAXoMzYer

问题原因及解决步骤 #

核心问题 #

直接将文件URI字符串作为请求体上传，Filestack接收到的是纯文本字符串而非实际音频文件内容，导致生成的文件为空，时长显示0:00。同时上传函数存在参数未接收、依赖异步状态的潜在问题。

解决方法 #

1. 修复上传函数参数传递
   原uploadFileAndGetURL未接收调用时传入的fileUri，改为直接接收参数，避免依赖组件状态的异步更新问题：

   async function uploadFileAndGetURL(fileUri) {
     // 后续代码使用fileUri而非recordingFileURI
   }
   

2. 使用FormData读取并上传文件内容
   通过Expo的FileSystem读取本地文件，封装为FormData后上传（Filestack支持该格式）：

   • 先安装依赖：npx expo install expo-file-system
   • 修改上传函数：

   import * as FileSystem from 'expo-file-system';
   import axios from 'axios';
   
   async function uploadFileAndGetURL(fileUri) {
     console.log("Starting upload...");
     console.log("Local file uri:", fileUri);
     try {
       const formData = new FormData();
       // 提取文件名
       const fileName = fileUri.split('/').pop();
       // 匹配正确的MIME类型：.m4a对应audio/mp4，.mp3对应audio/mpeg
       const mimeType = fileName.endsWith('.m4a') ? 'audio/mp4' : 'audio/mpeg';
       
       formData.append('file', {
         uri: fileUri,
         name: fileName,
         type: mimeType,
       });
   
       const response = await axios.post(
         `https://www.filestackapi.com/api/store/S3?key=${FILESTACKAPI}`,
         formData,
         {
           headers: {
             'Content-Type': 'multipart/form-data', // 必须设置该类型
           },
         }
       );
   
       if (response.status === 200) {
         console.log("Upload finished!");
         console.log("URL:", response.data.url);
         return response.data.url;
       }
     } catch (error) {
       console.error('Upload error:', error);
       throw error;
     }
   }
   

3. 确认录制文件格式
   你设置了outputFormat: ".mp3"，但从示例URI看实际输出是.m4a（iOS上Expo的Audio.Recording可能不支持直接输出MP3），需匹配正确的MIME类型。

4. 验证本地文件有效性
   先检查录制的文件是否为空：

   const fileInfo = await FileSystem.getInfoAsync(fileUri);
   console.log('File size:', fileInfo.size); // 大小大于0说明录制正常
   

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