Flutter Web如何以Uint8List形式上传录制的音频文件？

解决方案步骤 #

• 你已经通过XFile.readAsBytes()获取到了音频的Uint8List字节数据，接下来只需用该数据构造Web兼容的表单数据，再通过Dio发送请求即可。
• 核心是使用MultipartFile.fromBytes方法创建表单文件项——该方法不依赖dart:io，完全适配Web环境。
• 必须指定文件名和正确的Content-Type，确保服务器能识别并处理音频文件（格式需和flutter_sound的录制配置匹配）。

完整代码示例 #

XFile file = XFile(recordedFilePath);
Uint8List content = await file.readAsBytes();

// 构造表单数据，字段名需和服务器接口要求一致
FormData formData = FormData.fromMap({
  "audio_file": MultipartFile.fromBytes(
    content,
    filename: "recorded_audio.mp3", // 自定义文件名，带对应格式后缀
    contentType: MediaType("audio", "mpeg"), // 对应音频格式的MIME类型，如WAV用"audio/wav"
  ),
  // 如需其他参数，可在此添加，例如：
  // "uploader_id": "user_1001"
});

var dioo = Dio();
try {
  Response response = await dioo.post(
    Endpoints.uploadUrl,
    data: formData,
    // 可选：添加请求头，比如授权信息
    // options: Options(headers: {"Authorization": "Bearer your_token"}),
    // 可选：监听上传进度
    // onSendProgress: (int sent, int total) {
    //   print("上传进度：${(sent/total*100).toStringAsFixed(2)}%");
    // },
  );
  print("上传成功：${response.data}");
} catch (e) {
  print("上传失败：$e");
}

注意事项 #

• 确认服务器接口接收的表单字段名和代码中的"audio_file"完全一致，否则服务器无法获取到文件。
• 根据flutter_sound的录制格式调整contentType和文件名后缀：
  • MP3：MediaType("audio", "mpeg")，后缀.mp3
  • WAV：MediaType("audio", "wav")，后缀.wav
  • AAC：MediaType("audio", "aac")，后缀.aac
• 若上传大音频文件，建议开启onSendProgress回调监听上传进度，提升用户体验。

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